1.全局安装脚手架
npm install --global vue-cli
2.初始化一个脚手架项目
vue init webpack vuetest
3.选项配置:
Project name (vuetest) --回车跳过
Project description (A Vue.js project) --项目描述,也可直接点击回车
Author (........) -- 作者
Runtime + Compiler: recommended for most users --运行加编译
Install vue-router? (Y/n) --选Y,官方路由
Use ESLint to lint your code? (Y/n) --是否使用ESLint管理代码,新手可以用
Setup unit tests with Karma + Mocha? (Y/n) --我选Y
Setup e2e tests with Nightwatch(Y/n) --我选Y
5.下载vscode(
项目初始化好后,我们开始安装开发工具,我选用的是VScode )
安装插件:ESLINT和Vetur
6.引入项目:打开文件夹-项目文件夹
7.引入sass
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install --save-dev node-sass sass-loader
如果出现异常: MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。
解决方法 :npm install --global --production windows-build-tools (全局安装windows构建工具)
https://www.cnblogs.com/rainheader/p/6505366.html
8.引入完成之后: npm install
package.json会引入sass;
然后修改 webpack.base.config.js在loaders里面加上
9.引入element-Ui组件
npm install element-ui --save
修改配置: webpack.base.conf.js
添加:
{ test: /\\\\\\\\.css$/, loader: "style!css" }, { test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/, loader:"file" }
使用: 打开项目:src/main.js,添加下面三条
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
逻辑:
核心js 比如main.js 引入路由,组件,初始化一些公用数据。
10.引入morkjs模拟请求发送:
npm install mockjs --save-dev
11.引入axios发送http请求:
npm install axios --save