Vue 新建项目

1. 新建一个文件夹VueProject，基于该文件夹打开命令行，输入指令【vue create helloworld】

这里的项目命名不支持驼峰，因为HTML标签不区分大小写，但可以使用-分割，例如 first-project。

jwdmac2@QideiMac first-project % mkdir VueProject
jwdmac2@QideiMac first-project % cd VueProject        
jwdmac2@QideiMac VueProject % vue create helloworld

3. 选择Manually select features(选择特性以创建项目)

Vue CLI v5.0.8
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯ Manually select features 

• Default ([Vue 3] babel, eslint)（默认的vue3脚手架模板）
• Default ([Vue 2] babel, eslint)（默认的vue2脚手架模板）
• Manually select features（自定义选择特性）

通过上下按键选择，按Enter继续

3. 勾选项目中所需要的特性，【空格键】选中，这里选Babel、Router、Vuex、CSS Pre-processors、Linter/Formatter等

? 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

• Babel （Babel是一个JavaScript编译器，允许开发人员使用最前沿的JavaScript编写代码，然后Babel将其转换为老式的JavaScript，让更多的浏览器能够理解。）
• TypeScript （是 JavaScript 的超集，扩展了 JavaScript 的语法）
• Progressive Web App (PWA) Support （使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能）
• Router （路由器，实现页面直接的跳转）
• Vuex （专为 Vue.js 应用程序开发的状态管理模式, 采用集中式存储管理应用的所有组件的状态,解决多组件数据通信。）
• CSS Pre-processors （一种具有编程逻辑的CSS语言。允许使用类似变量、函数、继承、运算符等编程方法来编写CSS文件。）
• Linter / Formatter （代码规范检验工具，代码格式化工具）
• Unit Testing （单元测试 开发者角度）
• E2E Testing （端到端测试 用户角度）

多选，通过上下按键选择，按空格键选中或取消，按Enter继续，默认选中Babel和Linter。

4. 选择Vue的版本，这里采用3.x版本

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 (Use arrow 
keys)
❯ 3.x 
  2.x 

5. 是否选用历史模式，这里输入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 3.x
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) n

对路由器使用历史记录模式？ （需要适当的服务器设置，以便在生产中进行索引回退）（是/否）

6. 为当前vue项目选择CSS预处理工具，这里选默认

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
? 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) 
  Less 
  Stylus 

7. 选择 ESLint 代码规范检查级别：ESLint + Standard config

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
? 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: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier 

• ESLint with error prevention only （基本）
• ESLint + Airbnb config （Airbnb 编码规则）
• ESLint + Standard config （标准）
• ESLint + Prettier （完美）

8.何时进行ESLint语法校验：Lint on save

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
? 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: 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

• Lint on save（保存代码时 CTRL+S）
• Lint and fix on commit （提交代码到 git 时）

9. babel，postcss等配置文件如何放置：In dedicated config 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 3.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: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

• In dedicated config files 在专用配置文件中
• In package.json 在 package.json 中

10. 是否将上述配置保存为模板，这里输入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 3.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: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated 
config files
? Save this as a preset for future projects? (y/N) n

11. 等待安装即可。

安装中

Vue CLI v5.0.8
✨  Creating project in /Users/jwdmac2/Desktop/2023/web-projects/first-project/VueProject/helloworld.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠹ idealTree:helloworld: sill idealTree buildDeps

安装完成

Vue CLI v5.0.8
✨  Creating project in /Users/jwdmac2/Desktop/2023/web-projects/first-project/VueProject/helloworld.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 858 packages, and audited 859 packages in 5m

94 packages are looking for funding
  run `npm fund` for details

16 moderate severity vulnerabilities

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
🚀  Invoking generators...
📦  Installing additional dependencies...


added 166 packages, and audited 1025 packages in 1m

148 packages are looking for funding
  run `npm fund` for details

20 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project helloworld.
👉  Get started with the following commands:

 $ cd helloworld
 $ npm run serve

12. 下载完成后，进入 helloworld 文件夹下，运行指令【npm run serve】，编译并启动程序。输入地址：http://localhost:8080/，进入下面页面。

jwdmac2@QideiMac VueProject % cd helloworld
jwdmac2@QideiMac helloworld % npm run serve

> helloworld@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 55721ms                                 15:07:44


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.50.81:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

13. 项目结构如下:

 helloworld                  # 项目目录
    ├── node_modules         # 项目依赖的第三方包
    ├── public               # 静态文件目录，不会被打包影响，会原封不动的输出到dist目录中
      ├── favicon.ico        # 浏览器小图标
      └── index.html         # 单页面的html文件(网页浏览的是它)
    ├── src                  # 业务文件夹
      ├── assets             # 静态资源，通常存放图片等
        └── logo.png         # vue的logo图片
      ├── components         # 组件目录
        └── HelloWorld.vue   # 欢迎页面vue代码文件
      ├── router             # 路由控制
        └── index.js         # 路由配置文件，除非工程中页面数量较大，或路由关系复杂，否则使用这1个文件进行路由管理即可。
      ├── store              # 全局数据存储
        └── index.js         # 数据存储文件
      ├── views              # 页面视图组件
        ├── AboutView.vue    # About 页面
        └── HomeView.vue     # Home 页面   
      ├── App.vue            # 整个应用的根组件
      └── main.js            # 入口js文件
    ├── .gitignore           # git提交忽略配置
    ├── babel.config.js      # babel配置 
    ├── jsconfig.json        # JavaScript 项目的根目录，指定了JavaScript 语言服务提供的功能的根文件和选项。
    ├── vue.config.js        # Vue的配置文件
    ├── package.json         # 依赖包列表
    ├── README.md            # 项目说明
	└── package-lock.json    # 项目包版本锁定和缓存地址

Vue 脚手架的主要文件

• node_modules ：下载的第三方依赖包
• public/index.html ： (浏览器入口)浏览器运行的网页
• src/main.js ： Vue 脚手架打包的入口文件（App.vue 挂载在这里）
• src/App.vue ： Vue 组件页面入口（所有Vue文件最终关联此文件）
• package.json ： 依赖包列表，及脚手架配置信息
• dist ： 使用 npm run build 命令打包后会生成该目录。