关于vue-cli的一些整理

vue脚手架

1、如何引入插件

修改build/webpack.base.conf.js文件，

var webpack = require("webpack") // 1. 确保引入 webpack，后面会用到
module.exports = {
 ...
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  modules: [
   ..
  ],
  alias: {
   ...
   // 2. 定义别名和插件位置
   'jquery': 'jquery'
  }
 },
 plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),// 默认会把所有入口节点的公共代码提取出来,生成一个common.js
     // 3. 配置全局使用 jquery
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ]
}

2、使用sass

• 1 安装

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

• 2 配置: 在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
 test: /\.sass$/,
 loaders: ['style', 'css', 'sass']
}

*在APP.vue中修改style标签
<style lang="scss">

3、使用插件clean-webpack-plugin清除dist文件中重复的文件

• 1 安装

npm install --save-dev clean-webpack-plugin 

• 2 引入插件（修改build/webpack.prod.conf.js文件）

const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  ...
 plugins: [
  new CleanWebpackPlugin(['dist']) //匹配删除的文件
  ]
}

4、proxyTable 解决开发环境的跨域

在config 中的index文件中，有一个proxyTable参数,参数修改如下：

proxyTable: {
  '/api': {
    target: 'http://xxx.xxx.com/xxx/6',
    pathRewrite: {
      '^/api': '/'
    }
  }
}

如果需要跨域那么需要加上参数changeOrigin:true

proxyTable: {
  '/api': {
    target: 'http://xxx.xxx.com/xxx/6',
    changeOrigin:true,
    pathRewrite: {
      '^/api': '/'
    }
  }
}

请求过程就需要这样写

login:function(){
var  that=this;
   axios.post('/api/login',info).then(function (res) {
        console.log(res.data)
          if(res.data.code==2000){
              this.$router.push({ path: 'OrderTracking'})

          }else (res.data.code==4000){
                alert("登陆失败")
          }   
 })
}

5、关于vuex（创建store文件夹）

store.js store数据改变的唯一方法就是mutation
mutation-types.js定义一些方法
mutation.js 把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离
action.jsaction 提交的是 mutation，而不是直接变更状态

• 1 为什么使用vuex
  父组件给子组件传参通过props，但是子组件却不能直接修改父组件传过来的参数，只能通过$emit触发事件，传递参数
  但是使用vuex只需要$store.state
• 2 使用vuex
  1 安装、使用 vuex

npm install vuex --save
//然后在`main.js`中加入
import vuex from 'vuex'
Vue.use(vuex);
var store = new vuex.Store({//store对象
     state:{
        show:false
   }
})

2 再然后 , 在实例化 Vue对象时加入 store 对象 :

new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

完成到这一步 , 上述例子中的 $store.state.show 就可以使用了。