1. Use vue-cli to build the project
1. Install vue/cli, execute the following command to install or upgrade
npm i -g @vue/cli
npm i -g @vue/cli installation error
If the installation error is as follows
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, rmdir 'D:\Devlop\nodejs\node_global\node_modules\@vue\cli'
npm ERR! code EEXIST
npm ERR! path D:\Devlop\nodejs\node_global\node_modules\@vue\cli\bin\vue.js
npm ERR! dest D:\Devlop\nodejs\node_global\vue.cmd
npm ERR! EEXIST: file already exists, cmd shim 'D:\Devlop\nodejs\node_global\node_modules\@vue\cli\bin\vue.js' -> 'D:\Devlop\nodejs\node_global\vue.cmd'
npm ERR! File exists: D:\Devlop\nodejs\node_global\vue.cmd
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
npm ERR! A complete log of this run can be found in:
npm ERR! D:\Devlop\nodejs\node_cache\_logs\2023-04-13T02_13_31_038Z-debug.log
npm i -g @vue/cli installation error solution
Check the version of vue vue -V, the main reason is that the version of vue installed is too low.
D:\study_html\vueApp>vue -V
2.9.6
Enter the following command to forcibly overwrite the old version of vue-cli scaffolding.
npm install -g @vue/cli --force
After the execution, you can see that + @vue/[email protected]the installation is successful.
+ @vue/[email protected]
added 842 packages from 491 contributors in 84.507s
2. Enter the following command on the command line to create a Vue project
vue create 项目名称
vue create fails to create project
When using the vue create command to create a project fails, it is found that the error is as follows:
D:\study_html\vueApp>vue create demoApp
Invalid project name: "demoApp"
Warning: name can no longer contain capital letters
D:\study_html\vueApp>vue create myApp
Invalid project name: "myApp"
Warning: name can no longer contain capital letters
The vue command cannot create a project whose name contains uppercase letters. Therefore, when creating a vue project on the command line , use lowercase English letters to name the project, or use the vue ui visual interface to create the project.
①vue create is correctly created as follows, enter y
D:\study_html\vueApp>vue create demo-app
? Your connection to the default yarn registry seems to be slow.
Use https://registry.npmmirror.com for faster installation? Yes
② Choose the second option, manually select features, and support more customization options
- Default means to use the default configuration, check babel and eslint by default, and enter the package directly after pressing Enter
- Manually custom check the feature configuration, after the selection is complete, you can enter the package
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features
③ Customize the plug-ins to be installed. (Press the space to choose whether to tick or not, and press Enter to confirm.)
babel: A plugin that converts ES6 syntax to ES5 syntax
Router: vue-router, routing, because the project needs to use routing jumps, so check it
Vuex: Our project will also use it, but we haven't learned it yet, so don't check it for now, and download it when we learn
CSS Pre-processors: CSS preprocessing, you can choose less and sass, because our project style uses less, so a reward is offered
Note: Press the space to select whether to check or not, and press Enter to confirm
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
>(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
④ Select the version of vue and select the 2.x project
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
3.x
> 2.x
⑤ Whether to use history mode routing, no need, enter n (the routes we used before are all hash mode)
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
⑥Choose css preprocessing language, check Less
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
> Less
Stylus
⑦ Select which verification specification to use for code format verification, select the third type, and press Enter
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
⑧ Select when to trigger the code verification, press the space to check, select all and press Enter
- Lint on save is triggered when an error file is modified
- Lint and fix on commit when executing git committ submission
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save
(*) Lint and fix on commit
⑨Corresponding to configuration files such as Babel, ESLint, etc., select independent here, and check the first one
- In dedicated config files generated and saved to a separate configuration file
- In package.json Write the configuration information of the plugin together with the package.json file
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
⑩Choose whether you want to save the current settings for quick use next time. If you want to save the input y, you don't need to save the input n. Here I choose n.
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
①① Which way to choose to install dependencies, I choose npm
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies:
Use Yarn
> Use NPM
Finally, after the installation is successful, the prompt
added 216 packages from 110 contributors in 27.327s
152 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
� Generating README.md...
� Successfully created project demo-app.
� Get started with the following commands:
$ cd demo-app
$ npm run serve
3. Start the project and run the project
npm run serve
① Enter the project path
D:\study_html\vueApp>cd demo-app
② Execute the command to check that the project starts successfully
D:\study_html\vueApp\demo-app> npm run serve
> [email protected] serve D:\study_html\vueApp\demo-app
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 5229ms 上午11:00:41
App running at:
- Local: http://localhost:8080/
- Network: http://10.12.48.22:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.