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 componentname4. 打包项目
进入项目终端，执行 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:{})
})