1. vuejs web架构

基于vue-cli https://github.com/vuejs/vue-cli 基于vue.js2.0 http://vuefe.cn/ vue-router 2.0 http://router.vuejs.org/zh-cn/index.html Element UI http://element.eleme.io/ fontawsome 字体图标 http://fontawesome.io/ iconfont 字体图标 http://www.iconfont.cn/ 用less编写css es6 es7 基于webpack自动刷新 打包

01 初始化项目

全局安装 vue-cli

npm install —global vue-cli

创建一个基于 webpack 模板的新项目

vue init webpack my-project

安装依赖

cd my-project npm install npm run dev

参考：https://blog.csdn.net/Ashes18/article/details/62436891
想要自动打开浏览器 找到项目中的config文件夹内的index.js，里面有一个配置是autoOpenBrowser:false；
设置为true即可

02 安装ElementUi

下载

npm i element-ui -S

在main.js中引入js和css

import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’;

让vue引用Element ui

Vue.use(ElementUI);

Element官方文档：https://element.eleme.cn/#/zh-CN/component/table#shu-xing-shu-ju-yu-lan-jia-zai

03 安装sass

一、安装对应依赖node模块： npm install node-sass —save-dev npm install sass-loader —save-dev npm install style-loader —save-dev 二、打开webpack.base.config.js在loaders里面加上{ test: /.scss$/, loaders: [“style”, “css”, “sass”] }, 三、使用