Vue 项目搭建

环境搭建

搭建一个 Vue 项目，你需要具备 Vue 所需基本环境，如：node.js 、 npm 或 yarn 以及 Vue-cli 脚手架工具。

可使用以下命令检测是否已拥有以上环境，工具—命令行。

// 检测 Node
node -v

// 检测 Npm
npm -v

// Vue-cli
vue

若没有以上环境，安装也很简单的，可以查看 Web 前端环境搭建这篇文章

npm 需要切换至淘宝源，网络好的同学忽略

创建 Vue 项目

项目创建

进入需要创建项目的目录然后打开命令行工具键入以下命令创建依赖于 Webpack 的 Vue 项目。

vue init webpack hello-vue

hello-vue 为项目名称，可更改

然后回车，会出现一系列选项让你选择，这里可根据项目实际情况自行选择是否添加，如：若项目不需要 vue-router 模块可选择不安装，键入 n 回车即可。

命令跑完后即可成功创建项目。

启动项目

启动项目方式直接进入项目目录，然后命令行键入 npm start 即可，这时候可浏览器打开 http://localhost:8080 查看界面。

若端口被占用可修改项目中的 config 目录下 index.js 内 port 字段值

项目框架完善

UI 框架

mint-ui

此处根据项目需求选择， PC 端用 element 移动端用 mint-ui , 此处以 mint-ui 为例，首先安装依赖

npm i mint-ui -S

安装完成后就可以在项目中引入使用了。

这里的引入方式有两种：

完整引入
按需引入

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
    el: '#app',
    components: { App }
})

此种引入方式需要注意的是，样式文件需要单独引入。

按需引入

有时候我们需要用到的组件并不多，那么我们可能就需要用到按需引入的方式了。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 文件内容修改为：

{
    "presets": [
    ["es2015", { "modules": false }]
    ],
    "plugins": [["component", [
    {
        "libraryName": "mint-ui",
        "style": true
    }
    ]]]
}

然后在 main.js 中引入所需要的组件如 Header：

import Vue from 'vue'
import { Header } from 'mint-ui'
import App from './App.vue'

Vue.component(Header.name, Header)
// 此处也可写为
// Vue.use(Header)

new Vue({
    el: '#app',
    components: { App }
})

然后在组件中就可以使用该组件了

sass

安装sass的依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

安装完成后在 build 文件夹下的 webpack.base.conf.js 的 rules 部分添加配置

{
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
}

然后测试是否安装成功

将 App.vue 文件内 style 标签添加 scss 标记，如下：

<style lang="scss">

    ...

</style>

然后修改 style 标签内的样式，例如修改背景色：

<style lang="scss">

    $backGround:#FF0000;
    body {
        background: $backGround;
    }

</style>

查看界面显示效果，若显示为红色则安装成功

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。