乐趣区

关于vue.js:结合webpackvuesasselementui快速搭建框架

一、申明

sass:负责款式;
vue:使用 vuex、vue-router、axios(独立)、数据双向绑定;
webpack:加载资源和打包;
elementui:ui 框架;
这是疾速搭建我的项目一种模式,再联合第三插件和 vue 的格调指南,这样搭建的技术成本低且实用,如果有更好的模式或者倡议,欢送大家留言。

二、步骤

1、装置 node,官网下载安装即可,装置完后查看版本号;

2、装置 vue-cli 脚手架,输出指令 npm install --global vue-cli

3、利用脚手架创立 vue 我的项目 myProject,创立指令 vue init webpack myProject

全都输出 n,顺次回车,装置实现后,会在本地生成以下文件:

4、顺次执行以下命令进行装置依赖,也能够应用 yarn 进行装置;

npm install
npm install vue-router
npm install vuex --save
npm install axios
npm install node-sass --save-dev 
npm install sass-loader --save-dev
npm install element-ui -S
npm install echarts --save

举荐插件:

npm i --save normalize.css // 提供跨浏览器的高度一致性
npm i --save nprogerss  // 加载进度条
npm i --save lodash // 一个高性能的 js 工具库
npm i --save  es6-promise // 兼容 es6
npm i babel-plugin-dynamic-import-node --save-dev // 解决编译过慢的问题 

注意事项:如果手动装置 sass 装置遇到报错,能够是存在版本兼容问题,解决就是 ”node-sass”: “^4.11.1″,”sass-loader”: “^7.3.0″ 搭配。

6、运行我的项目,执行命令 npm run dev
7、打包我的项目,执行命令 npm run build

退出移动版