Vue入坑笔记

近段时间常使用vue-cli开发，写点记录，避免时间久之忘了。

环境

1. nodejs
　　vue-cli开发基于nodejs环境，确保开发的环境中已安装了nodejs。
　　安装教程 https://www.runoob.com/nodejs...
　　查看是否已安装nodejs，在cmd中输入 node --version 若已安装则输出版本号。

2. vue
　　安装vue环境 npm install vue
　　安装vue-cli环境，npm install --global vue-cli

新建项目

1. 新建模板
　　新建一个projectname的项目 vue init webpack projectname
　　之后会出现Project name和Project description之类的，无关紧要，可以修改，也可以默认跳过。
　　是否安装路由 ?Install vue-router?(Y/n) Y //看情况定，一般都有用到
　　初始化项目完毕，根据提示操作，模块安装完后即可启动项目 npm run dev

2. 修改配置
　　安装的模板有些配置一般情况不符合自己需要，需要手动做些修改。
　　build文件夹utils.js文件中设置 publicPath: '../../' 解决图片路径找不到的问题
　　config文件夹的index.js文件build对象下的 assetsPublicPath: './' 解决打包后的项目页面空白问题

3. 安装模块
　　使用模块配合开发，如 Vue + Vuex + elementUI + axios + font-awesome + scss

• Scss

　　安装 Scss，使用方式 <style scoped lang="scss">
　　npm install node-sass --save-dev
　　npm install sass-loader --save-dev
　　安装 font-awesome，使用方式 <i class="fa fa-coffee"></i>
　　npm install font-awesome --save main.js中引入 import 'font-awesome/css/font-awesome.css'
　　

• elementUI

　　安装 elementUI，使用方式 <el-switch v-model="value"></el-switch>
　　npm i element-ui -S
　　在main.js中引入
　　import Element from 'element-ui'
　　import 'element-ui/lib/theme-chalk/index.css'
　　Vue.use(Element, {size: 'small'})

• axios

　　安装axios，使用方式 this.$http(method:'post', url:'/webApi', data:{}).then(res=>{……});
　　npm install axios -S
　　在main.js中引入
　　import axios from 'axios'
　　Vue.prototype.$http = axios

• Vuex

　　安装Vuex，使用方式 this.$store.commit('setMsg','message');
　　npm install vuex -S
　　在src中新建文件夹vuex，在vuex文件夹中新建store.js，如

    //store.js
    import Vuex from 'vuex'
    import Vue from 'vue'
    Vue.use(Vuex)
    //定义状态和暴露状态，如
    const store = new Vuex.Store({
      state: {
        msg: 'message',
      },
      mutations: {
        setMsg(state, val) {
          state.msg = val
        },  
      }
    })
    export default store
    
    //main.js中引入
    import store from './vuex/store.js'
    
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

发布vue组件到npm

1. 新建项目
　　使用cli快速搭建一个项目，和新建一个普通的项目一样。假定项目为项目名 projectname

2. 开发组件
　　新建一个即将发布的组件vue文件，比如在components目录下新建componentname.vue

3. 修改配置文件

//修改package.json文件，如
{
  "name": "projectname", //发布的包名，避免和已发布的包名冲突
  "version": "1.0.0", //版本号，当第二次发布时需手动设置其版本
  "description": "A Vue.js project", //项目的描述，可不写
  "author": "starrysky", //项目的作者
  "private": false, //开源，非私有
  "main": "dist/componentname.min.js", //打包的入口文件
  "repository": { //仓库地址，可不写
    "type": "git",
    "url": ""
  },
}

//修改build文件夹中的webpack-prod.conf.js，如
  output: { //该部分为重写
    path: config.build.assetsRoot,
    publicPath: config.build.assetsPublicPath,
    filename: 'componentname.min.js',
    library: 'componentname',
    libraryTarget: 'umd'
  },
  plugins: [ //该部分删减内容
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      allChunks: true,
    }),
    new OptimizeCSSPlugin(),
  ]
  
//修改config文件夹下index.js的build字段中的 assetsSubDirectory: '/'
//修改main.js文件
import componentname from '@/components/componentname.vue',
export default componentname

4. 打包项目
　　进入项目终端，执行 npm run build
　　打包后将.gitignore文件的dist/删掉

5. 发布模块
　　终端中登录npm，npm login
　　输入账号密码后，执行发布 npm publish

6. 使用模块

//新项目中安装npm包，npm install --save-dev projectname
import componetName from 'projectname'

components:{
  componetName
}

碰到的问题

1. 启动服务失败，非程序语法问题，导致启动服务打包错误？
　　可能是node_modules版本与本机安装的webpack版本不一致，删除，执行npm install重新下载所有依赖，偶尔神奇的墙会导致安装出错，多试几次。

2. 开发过程中设置局域网可访问？
　　在config文件夹下的index.js中修改host字段值为本机在局域网中的ip。

3. 开发过程中跨域访问？

//在config文件夹下的index.js中修改proxyTable，如跨域访问 http:192.168.0.3:10010/api……
proxyTable: {
  '/api':{
   target: 'http:192.168.0.3:10010',
   chageOrigin: true,
   pathRewrite:{
     '^/api': '/api'
   }
  }
}

4. 项目打包后，页面显示空白？
　　在config文件夹下的index.js中的build对象下设置 assetsPublicPath: './'

5. 项目打包后，图片路径加载错误？
　　在build文件夹下的utils.js设置 publicPath: '../../'

6. 发出的请求编码失败?
　　存在特殊字符导致编码失败，如%,对参数进行encodeURI编码，替换浏览器的自动编码。

7. class 继承报错 Class constructor xxx cannot be invoked without 'new' ?
　　可能是文件路径问题。当class和继承的class不同时在src文件夹内外的话，会出现该错误。

8. 使用elementUI时发现el-input类型为number时，绑定的值为0不显示？
　　elementUI版本2.3.4的bug，更新npm包即可。

9. 如何更新安装的npm包？

npm install -g npm-check-updates //安装高效升级插件
ncu //列出所有可更新的模块
ncu -a //更新所有模块

10. npm包发布失败，403无权限发布?
　　多半原因是包名冲突，在发布之前先查找是否已存在该模块

11. axios请求，如何取消重复请求?

//axios请求拦截器中统一处理
let pending = []; //声明一个数组用于存储每个请求的取消函数和标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
  let i = pending.findIndex(item => item.u === config.url+'&'+config.data);
  if(i > -1){ //执行取消操作并从删除该条记录
    pending[i].f();
    pending.splice(i, 1); 
  }
}

// http请求拦截器
axios.interceptors.request.use(config => {
  //统一get请求和post请求，并将其格式化
  removePending(config);
  config.cancelToken = new cancelToken((c)=>{ 
    pending.push({ u: config.url + '&' + config.data, f: c }); 
  }); 
  return config
}, error => {
  return Promise.reject(error)
})

// http响应拦截器
axios.interceptors.response.use(data => {
  removePending(data.config);
  return data;
}, error => {
  return Promise.reject(data:{})
})