第一步，安装cnpm,通过淘宝的镜像：
npm i -g cnpm --registry=https://registry.npm.taobao.org
第二步：设置npm的config
npm config set registry https://registry.npm.taobao.org
第三步：安装vue的脚手架
npm install -g @vue/cli
第四步：设置脚手架的全局
cnpm i @vue/cli-init -g
第五步：在计算机的高级系统设置中配置vue.cmd文件所在的路径
找到vue.cmd文件所在的路径
点击环境变量
选中用户变量中的Path,再点击编辑
点击新建，将路径复制进去，点击保存
第六步：创建一个空文件夹，使用vsCode打开这个文件夹，开启终端执行以下代码
最后的vue-demo是vue项目的名称，可以随便取名。
vue init webpack vue-demo
第七步：等待准备就绪后如下配置
由上往下分别是配置 项目名称、项目描述、作者、打包方式、vue-router、eslint、单元测试、e2e测试、使用npm还是yarn
第八步：代码规则 使用vsCode安装prettier - Code
第九步：在项目根目录 创建.prettierrc.js文件，并输入以下规则（规则经过处理已经能与vue的eslint不冲突）
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 2 个空格缩进
tabWidth: 2,
// 不使用缩进符，而使用空格
useTabs: false,
// 行尾需要有分号
semi: false,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾不需要逗号
trailingComma: 'none',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf',
};
第十步： 关闭 ‘space-before-function-paren’ eslint 报错
找到根目录下得.eslintrc.js文件， rules下添加 “space-before-function-paren”: ‘off’
第十一步：less的使用
如果直接引入less文件的话，会报错，不能找到less-loader，为了解决这个问题，需要安装less和less-loader，vue将less的webpack配置是写好了的，只需要下载这两个依赖即可。
yarn add less less-loader
或
npm install less less-loader --save
但安装完以后发现还是报错 TypeError: this.getOptions is not a function，这是因为less-loader的最新版本，与vue的less-loader配置不兼容
npm uninstall less-loader
npm install less-loader@5.0.0
或
yarn remove less-loader
yarn add less-loader@5.0.0
感兴趣的同学，可以看以下项目里面这一段代码
第十二步: 使用axios请求后台接口
安装axios
yarn add axios
或
npm install axios --save
将axios挂载到vue全局；在main.js中
import Vue from 'vue'
import App from './App'
import router from './router'
+ import axios from 'axios'
Vue.config.productionTip = false
+ Vue.prototype.axios = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App },
template: '<App/>'
})
组件中使用
<template>
<div>
这是vue的$emit的测试页面
</div>
</template>
<script>
export default {
name: 'emit',
data() {
return {
test: 'a'
}
},
methods: {
},
mounted() {
this.axios({
method: 'get',
url: '192.168.01:8000/dx',
data: {
name: 'dx'
}
})
}
}
</script>
第十三步：mockjs 拦截axios请求，获取mock数据，前后端分离式开发
npm install mockjs --save
或
yarn add mockjs
在src目录下创建mock文件夹，文件夹创建mock.js
import Mock from 'mockjs'
// eslint-disable-next-line
Mock.mock('192.168.01:8000/dx', {
// 这里的url地址其实可以换成一个字段，比如msg,下边请求时候对应就可以
name: '@cname',
'age|1-10': 10
})
引入main.js文件夹中
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
+import './mock/mock'
Vue.config.productionTip = false
Vue.prototype.axios = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App },
template: '<App/>'
})
在组件中使用axios
<template>
<div>
这是vue的$emit的测试页面
</div>
</template>
<script>
export default {
name: 'emit',
data() {
return {
test: 'a'
}
},
methods: {
},
mounted() {
this.axios({
method: 'get',
url: '192.168.01:8000/dx',
data: {
name: 'dx'
}
}).then((response) => {
console.log(response)
})
}
}
</script>
第十四步：打包的时候去除console和debugger
在UglifyJsPlugin插件中，配置uglifyOptions 添加如上的配置即可
第十五步 前后端接口联调，proxy 处理跨域
之所以要在这里设置，是因为
你也可以通过改变上面proxy的配置，将proxy在其它地方进行配置
注意： 记得proxy代理的时候将mockjs给关掉，不然axios被拦截了，自然也就不会被代理了。在main.js中将其注释掉
然后我们就可以看到开始代理了，只不过代理的接口是我乱写的，代理失败了
第十六步 解决ie浏览器 promise兼容问题
vue项目通常使用的是axios作为请求后台数据的方式，但axios是对ajax的一种promise封装，babel-loader不足以解决promise的问题，所以需要额外安装babel-polyfill
yarn add babel-polyfill 或
npm install babel-polyfill --save
在main.js中的最顶层引入
找到webpack.base.conf.js 按下图红框内容进行更改
第十七步 ie浏览器报错 Invalid Host/Origin header
解决办法的原理是 在webpack配置中找到 devServer，添加配置项 disableHostCheck: true,
实际的vue-cli项目中，找到webpack.dev.conf.js文件 ，写下如下代码 devWebpackConfig.devServer.disableHostCheck = true
第十八步 使用vuex
vuex是vue全家桶的重要成员之一，项目不一定会使用，需要的话，可以参考一下。
yarn add vuex 或
npm i vuex --save
在src文件夹下创建store文件夹，并创建index.js
index.js
import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex的插件
Vue.use(Vuex)
//创建一个store对象
const store = new Vuex.Store({
// 定义的公共变量
state: {
count: 0
},
// state中的变量只能在mutations中通过方法修改
mutations: {
changeCount: function (state) {
state.count++
}
},
actions: {
},
getters: {
}
})
//导出这个对象
export default store
一定要挂载到main.js中的vue实例中，
第十九步(可选ui) 安装element-ui 并配置按需加载
element-ui 安装指南 https://element.eleme.cn/#/zh-CN/component/quickstart
yarn add element-ui 或
npm i element-ui --save
在main.js中引入并安装element-ui和element-ui的样式
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'babel-polyfill'
import Vue from 'vue'
// 添加element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import axios from 'axios'
import store from './store/index'
import './mock/mock'
// 安装element-ui的插件
Vue.use(ElementUI)
Vue.config.productionTip = false
Vue.prototype.axios = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: {
App },
template: '<App/>'
})
配置element-ui的按需加载，找到.babelrc文件，添加如下配置
需要安装 babel-plugin-component
yarn add babel-plugin-component
或
npm i babel-plugin-component -D
第十九步(可选ui)：使用ant-design-vue
ant-design-vue 安装指南 https://www.antdv.com/docs/vue/use-with-vue-cli-cn/
yarn add ant-design-vue 或
npm i ant-design-vue -D
yarn add babel-plugin-import 或
npm i babel-plugin-import -D
修改.babelrc文件，配置 babel-plugin-import
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
- "plugins": ["transform-vue-jsx", "transform-runtime"]
+ "plugins": [
+ "transform-vue-jsx",
+ "transform-runtime",
+ ["import", {
"libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
+ ]
}
在组件中，像这样直接使用就可以了
import {
Button } from 'ant-design-vue';
最后：启动vue项目 在vsCode终端输入 npm run dev ，点击 http://localhost:8080 就可以看到项目页面了。