1、安装node
百度下载安装包,一步一步安装即可,完成后cmd打开命令面板检验是否成功:
node -v查看node版本
npm -v查看npm版本
由于npm拉取速度较慢,所以可以用cnpm代替来加快速度
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm相关信息:https://npm.taobao.org/
2、vue脚手架及依赖项安装
全局安装vue-cli:cnpm install --global vue-cli
然后cd切换到安装目录,创建一个基于 webpack 模板的新项目并选择安装vue-router(vue init webpack my-project),可以不选择e2e等校验测试什么的,当然若有需要可选择,最后选择手动安装依赖
然后cd切换到该项目目录(cd my-project
),安装依赖cnpm install
安装element-ui和axios:
cnpm i element-ui -S cnpm i axios -S
如果用到sass:cnpm i sass-loader node-sass -D
(-S 是 --save, -D 是 --save-dev)
3、element和axios的引入
在main.js中添加
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) import axios from 'axios' Vue.prototype.$http = axios
4、构建命令
- npm run dev即可在浏览器中查看初始效果,所做的更改也会实时刷新,这就是构建工具的魅力所在,免除每次都要手动刷新的不便,打开控制台可以看到它是通过websocket来实现的。
- npm run build构建生产包,默认会生成一个dist文件夹,里面包含入口文件index.html的资源文件夹static。
- npm run build --report查看打包报告
有朋自远方来...评论一下呗O(∩_∩)O