vue项目-搭建（1）

1.npm list -g --depth 0  先查询是否全局安装了vue和vue-cli
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')
    //   }
    // },