After the Vue scaffolding is successfully installed, we can use the following command to create a Vue project
vue create 项目名称
After pressing Enter, enter the template selection and use the up and down keys on the keyboard to move. After selecting, press the Enter key to enter the next step.
Under normal circumstances, we manually select the required functions. So select Manually select features
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint) // 默认的vue3模板
Default ([Vue 2] babel, eslint) // 默认的vue2版本
Manually select features // 手动选择需要的功能生成模板
Select the configuration required for the project. There are basically related settings behind each selected item. The space key switches between selection and cancellation.
? 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)
// 选择项目所需的功能：（按<space>选择，<a>切换全部，<i>反转选择，<enter>继续）
>(*) Babel // 使用 babel
( ) TypeScript // TypeScript可以根据项目需要去配置
( ) Progressive Web App (PWA) Support // 一般项目我们都不使用PWA
(*) Router // 建议添加vue-router，官方的路由管理包，添加之后也会自动生成路由配置相关代码
(*) Vuex // 建议添加vuex，官方的全局状态管理包，添加之后也会自动生成全局状态配置相关代码
(*) CSS Pre-processors // 使用css预处理器，建议勾选，因为一般我们会使用scss或者less
(*) Linter / Formatter // 代码格式化相关配置
( ) Unit Testing // 不配置测试
( ) E2E Testing // 不配置测试
Select the Vue version of the project project. Currently, the most commonly used versions of Vue are vue2.0 and vue3.0. The decision should be made based on the actual situation of the project. I will choose Vue2.0 here.
? 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 (Use arrow keys)
// 选择项目开始时使用的Vue版本。（使用上下箭头键进行选择）
3.x
> 2.x
Since we chose vue-router, this step is to ask us whether to enable history mode. The history
mode of routing requires back-end support.
The advantage is that the address in the address bar does not contain #, which looks more beautiful. We temporarily choose n first. Doesn't work.
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)
Next, select the css preprocessor. Sass, less, and Stylus preprocessors are provided by default. Generally, we use sass.
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): (Use arrow keys)
> Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器
Less
Stylus
Select the configuration related to code formatting. Generally, I choose EsLint and Prettier for code formatting.
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)
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only //只进行报错提醒
ESLint + Airbnb config //不严谨模式
ESLint + Standard config //正常模式
> ESLint + Prettier //严格模式 使用较多
This step allows us to select the circumstances under which code formatting should be checked and repaired.
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)
? Pick a linter / formatter config: Prettier
? 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 // git提交代码的时候格式化
This step is the form in which the relevant configurations we choose are stored. Generally, we choose to generate separate files.
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)
? Pick a linter / formatter config: Prettier
? 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) //对应的配置是生产单独的文件还是放在package.json里
> In dedicated config files // 单独的文件
In package.json // 存储在package.json文件中
Should we save these configurations as project default templates so that we don’t need to make these configurations when we create a new project next time? If we need to save them as templates, we need to specify the name of the template. If not, directly install the dependencies.
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)
? Pick a linter / formatter config: Prettier
? 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)
Successful installation!