一、添加CSS预处理器SASS

关于SASS语法的注释：

lang =“scss”对应于CSS-superset语法（带大括号和分号）。

lang =“sass”对应于基于缩进的语法。

1.安裝sass的依赖包

npm install sass-loader node-sass --save-dev

2.在build文件夹下的webpack.base.conf.js的rules里面添加配置

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

3.在APP.vue组件中使用预处理器，修改<style>标签上的lang属性：

二、添加element-ui

1.安装element-ui依赖

npm install element-ui --save

2.在main.js中引用

import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)

3.在*.vue中调用组件

    
     测试
    

三、添加font-awesome字体图标库

根据需求可选择安装，引用： <i class="fa fa-user-circle"></i>

npm install font-awesome --save

四、添加axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1.安装axios

npm install axios --save

2.在main.js引入axios

import Axios from 'axios'  Vue.prototype.$axios = Axios

3.简单运用axios

this.$axios.get('url', {    params: {      a: xxx,    }  }).then(res => {console.log(res)});    .catch(err => {console.log(err)});      this.$axios.post('url', {      a: xxx,  }).then(res => {console.log(res)});    .catch(err => {console.log(err)});

五、添加vuex

1.安装vuex依赖

npm install vuex --save

2.在main.js中引入vuex

import vuex from 'vuex' Vue.use(vuex) var store = new vuex.Store({   state: {     age: 20   } })

3.在实例化Vue对象中加入store对象, this.$store.state.age 就可以使用了。

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

以上只是为了方便简单演示，把store对象写在main.js里面，在实际运用中，可以在src目录下建一个store文件夹来专门处理vuex

六、完善后目录结构

添加style（样式）、store（vuex）、pages（页面）、images（图片）、common（公用js）等目录文件

.├── build/                      # webpack配置文件│   └── ...├── config/│   ├── index.js                # 主要项目配置│   └── ...├── src/│   ├── main.js                 # 应用入口js文件│   ├── App.vue                 # 主应用程序组件│   ├── components/             # 公共组件目录│   │   └── ...│   └── store/                  # vuex│   │   └── ...│   └── pages/                  # 页面目录│   │   └── ...│   └── images/                 # 图片目录│   │   └── ...│   └── style/                  # 样式目录│   │   └── ...│   └── common/                 # 公共js目录│   │   └── ...│   └── router/                 # 前端路由│   │   └── ...│   └── assets/                 # 模块资源（由webpack处理）│       └── ...├── static/                     # 纯静态资源（直接复制）├── .babelrc                    # babel 配置，es6需要babel编译├── .postcssrc.js               # postcss 配置├── .eslintrc.js                # eslint 配置├── .editorconfig               # 编辑器 配置├── .gitignore                  # 过滤无需上传的文件├── index.html                  # index.html模板└── package.json                # 构建脚本和依赖关系