The first step is to install cnpm, through Taobao's mirror:
npm i -g cnpm --registry=https://registry.npm.taobao.org
Step 2: Set up npm's config
npm config set registry https://registry.npm.taobao.org
Step 3: Install vue scaffolding
npm install -g @vue/cli
Step 4: Set the overall scaffolding
cnpm i @vue/cli-init -g
Step 5: Configure the path
where the vue.cmd file is located in the computer’s advanced system settings. Find the path where the vue.cmd file is located
Click on environment variables
Select the Path in the user variable, and then click Edit
Click New, copy the path into it, and click Save
Step 6: Create an empty folder, use vsCode to open this folder, open the terminal and execute the following code. The
last vue-demo is the name of the vue project, you can name it anything you like.
vue init webpack vue-demo
Step 7: Wait for the following configuration after you are ready.
From top to bottom, configure the project name, project description, author, packaging method, vue-router, eslint, unit test, e2e test, use npm or yarn.
Step 8: Code Rules Use vsCode to install prettier-Code
Step 9: Create a .prettierrc.js file in the project root directory, and enter the following rules (the rules have been processed so that they do not conflict with Vue's 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',
};
Step 10: Close the'space-before-function-paren' eslint error report
Find the .eslintrc.js file in the root directory, add "space-before-function-paren":'off' under the rules
The eleventh step: the use of less
If the less file is directly imported, an error will be reported and the less-loader cannot be found. In order to solve this problem, you need to install less and less-loader. Vue has written the less webpack configuration, only You need to download these two dependencies.
yarn add less less-loader
或
npm install less less-loader --save
But after installation, I still found an error TypeError: this.getOptions is not a function. This is because the latest version of less-loader is not compatible with vue's less-loader configuration.
npm uninstall less-loader
npm install less-loader@5.0.0
或
yarn remove less-loader
yarn add less-loader@5.0.0
Interested students, you can see this piece of code in the following project
Step 12: Use axios to request the background interface
Install axios
yarn add axios
or
npm install axios --save
Mount axios to vue global; in 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/>'
})
Used in components
<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>
The thirteenth step: mockjs intercepts axios requests, obtains mock data, separate development of front and back ends
npm install mockjs --save
或
yarn add mockjs
Create a mock folder in the src directory, and create a mock.js folder
import Mock from 'mockjs'
// eslint-disable-next-line
Mock.mock('192.168.01:8000/dx', {
// 这里的url地址其实可以换成一个字段，比如msg,下边请求时候对应就可以
name: '@cname',
'age|1-10': 10
})
Introduce into the main.js folder
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/>'
})
Use axios in components
<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>
Step 14: Remove the console and debugger when packaging.
In the UglifyJsPlugin plug-in, configure uglifyOptions and add the above configuration.
Step 15: Front-end and back-end interface joint debugging. The proxy handles cross-domain
settings. The reason why you need to set it here is because
you can also configure the proxy in other places by changing the proxy configuration above.
Note: Remember to give mockjs to the proxy when proxying Turn it off, otherwise axios will be intercepted, and naturally it will not be proxied. Comment it out in main.js
and we can see that the proxy is started, but the proxy interface is scribbled by me, and the proxy fails. The
sixteenth step is to solve the problem of IE browser promise compatibility.
Vue projects usually use Axios is a way to request background data, but axios is a promise encapsulation of ajax, and babel-loader is not enough to solve the promise problem, so additional installation of babel-polyfill is required
yarn add babel-polyfill 或
npm install babel-polyfill --save
Introduce at the top level in
main.js Find webpack.base.conf.js and change the content in the red box as shown in the figure below.
Step 17 ie browser reports an error Invalid Host/Origin header
. The principle of the solution is to find the devServer in the webpack configuration. Add the configuration item disableHostCheck: true, in the
actual vue-cli project, find the webpack.dev.conf.js file and write the following code devWebpackConfig.devServer.disableHostCheck = true
. Step 18: Use vuex
vuex is an important member of the vue family bucket One, the project may not be used, you can refer to it if you need it.
yarn add vuex 或
npm i vuex --save
Create a store folder under the src folder, and create 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
Must be mounted to the vue instance in main.js,
Step 19 (optional ui) Install element-ui and configure on-demand loading
element-ui installation guide https://element.eleme.cn/#/zh-CN/component/quickstart
yarn add element-ui 或
npm i element-ui --save
Introduce and install element-ui and element-ui styles in main.js
// 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/>'
})
Configure the on-demand loading of element-ui, find the .babelrc file, add the following configuration,
babel-plugin-component needs to be installed
yarn add babel-plugin-component
或
npm i babel-plugin-component -D
The nineteenth step (optional ui): use ant-design-vue
ant-design-vue installation guide 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
Modify the .babelrc file and configure 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" }]
+ ]
}
In the component, you can use it directly like this
import {
Button } from 'ant-design-vue';
Finally: start the vue project, enter npm run dev in the vsCode terminal, and click http://localhost:8080 to see the project page.