1、检查 node版本
node -v
2、全局安装 vue-cli
npm install -g vue-cli
或使用国内淘宝镜像
npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm install -g vue-cli
3、使用 webpack搭建
vue init webpack vue-demo
-
vue-demo即为项目名称,可自定义
-
Install vue-router Y 安装 vue-router
-
其他全部为 No
4、启动
npm run dev
npm start
5、访问http://localhost:8080
6、打包项目
npm run build
7、Vuex安装
npm install vuex --save
main.js引入
import Vuex from 'vuex'
main.js使用Vuex
Vue.use(Vuex)
8、vue-resource安装(不能与axios同用)
npm install vue-resource --save
main.js引入
import VueResource from 'vue-resource'
main.js使用Vuex
Vue.use(VueResource)
9、axios安装
npm install axios
然后
npm install --save axios vue-axios
main.js引入 axios、vue-axios
import axios from 'axios'
import VueAxios from 'vue-axios'
main.js使用axios、vue-axios
Vue.prototype.axios = axios;
Vue.use(VueAxios, axios);
10、安装Element-ui
npm i element-ui -s
main.js引入Element-ui
import ElementUI from 'element-ui'
main.js使用ElementUI
Vue.use(ElementUI);
11、bootstrap + jquery 安装
npm install bootstrap --save-dev
npm install jquery --save-dev
main.js引入bootstrap、jquery
import $ from 'jquery'
/*Bootstrap引入*/
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
配置build文件webpack.base.conf.js,添加两行代码:
const webpack = require('webpack')
module.exports = {
//省略
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
]
}
20、其他安装
采用当前项目安装(--save-dev)
npm install 插件名称@版本 --save-dev