Article directory
1. Install Node.js
1.1 Download Node.js
vue-cliBased on node.jsthe operating environment, you need to install and configure node.js before installing the vue scaffolding
Download address: https://nodejs.org/en/
●LTS = Long Term Support stable version (recommended)
●Current has an experimental version of the latest features
1.2 Path environment variable configuration
Find node.exe in the directory where Node.js is installed (for example, mine is installed in the H drive)
依次执行: My Computer - System Properties - Advanced System Settings - Advanced Environment Variables - System Variables Find Path - Edit and add H:\ at the back and confirm
1.3 Check if Node.js is installed successfully
Open the control command line program (cmd), enter node -v, if the version number is displayed below, the installation is successful
node -v
1.4 Check if npm is automatically installed successfully
Then enter npm -v , if the version number is displayed below, the installation is successful
npm -v
1.5 Configure the download source - install nrm globally
npm install nrm -g
1.6 Using taobao mirror source
View mirror source
nrm ls
Use taobao mirror source
nrm use taobao
2. Install Vue Scaffolding
2.1 Install webpack and webpack-cli
Install webpack and webpack-cli
npm install webpack webpack-cli -g
Check if the installation was successful
webpack -v
2.2 Install Vue-cli
//安装最新版本
npm install -g @vue/cli
//安装vue-cli 3.x及以上指定版本
npm install '@[email protected]' -g
Check if the installation was successful
vue -V (大写V)
3. Graphical visualization to create a Vue project
3.1 Start the graphical interface
vue ui
3.2 Create a new project and name it
Click to create
3.3 Manually configure the Vue project
select manual
Select Router and use configuration file
If you save the preset to a preset name, you can select this preset for the next project creation. You can also not save the preset
3.4 Add element ui plugin
Click on Plugins => Add Plugin
Search for element-ui plugin and install it
configure axios
3.5 run serve
Click on task => serve => run
The status is to start the app after the compilation is successful
show page
3.6. Syntax processing ESLint
Task-serve-output-warning, you can see some syntax error warnings issued by ESLint, the format document of VSCode is inconsistent with ESLint rules
Create a file .prettierrc in the project root directory
{
"semi": false, // 格式化是结尾不加分号
"singleQuote" : true // 单引号代替分号
}
Modify ESLint grammar rules.eslintrc.js
rules: {
'space-before-function-paren': 0 // 禁用函数后面要加空格的格式要求
}
Modify the configuration item and turn off the eslint syntax check
1. Find (create if not created) the vue.config.js file in the root directory of the project
2. Add the following content to the file, then save the file and recompile
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
//关闭eslint检查
lintOnSave:false
})
3. Create a Vue project from the command line
Create project
vue create xxx
Depending on the project requirements, you can choose vue2 and vue3
run the project
npm run serve