2.如果没有,那就全局安装 cnpm install vue -g cnpm install vue-cli -g cnpm install webpack -g
3.vue init webpack 自己起个项目名称
4.进入这个项目名称下 npm install,
5.在package.json中看是不是有vuex,如果没有的话,npm install vuex --save
6.在main.js中使用全局组件,比如需要使用vuex,element-ui,下面
我们在vue里面使用别人开发的组件,分为三步:
第一步就是install,npm install vuex -g npm install element-UI --save 注意:--save是上线依赖
第二步在main.js里面引入,
对于vuex:在引入vue的时候要把store一起引入,因为要在全局对象注入store
既然要引入store,那么就得创建store,在src下创建一个store文件夹,用来存放状态库,也就是vuex中的数据操作,在store中有index.js和module文件夹
module文件夹下存放数据操作模块,index.js里面进行模块注册(这里的内容在vue中项目-vuex中有详细解释)
这是index.js 里面负责注入config模块
import Vue from 'vue' import Vuex from 'vuex' import config from './modules/config' Vue.use(Vuex) const debug = process.env.NODE_ENV !== 'production'; export default new Vuex.Store({ modules: { config } })
import Vuex from 'vuex' import store from '@/store';
对elementUI:记得要引入css
注意import 'element-ui/lib/theme-default/index.css'或者import 'element-ui/lib/theme-chalk/index.css';
今天也被困扰了,研究了下,发现原因很简单:这个文件不存在
根据import的路径看node_modules\_element-ui@2.0.2@element-ui\lib这个目录下并没有theme-default这个文件夹,只有个theme-chalk,所以就直接改成它,这就好了。
import elementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import 'element-ui/lib/theme-chalk/index.css';(二选一,这是新版本的element-ui)第三步Vue.use这个组件。
Vue.use(elementUI); Vue.use(Vuex)7.然后创建全局Vue对象,在对象中注入store和router
new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
8.运行后发现报错:原因是eslint格式错误,注释eslint :查找文件webpack.base.conf.js,找到rules的第一个对象,注释掉
module: { rules: [ // { // test: /\.(js|vue)$/, // loader: 'eslint-loader', // enforce: 'pre', // include: [resolve('src'), resolve('test')], // options: { // formatter: require('eslint-friendly-formatter') // } // },