vue cli 4.1.1完整项目搭建（第一步，创建项目）

以搭建一个项目名称为vue-test的Vue前端项目为例

說好樂卟見麵

6033人浏览 · 2019-12-21 20:32:01

說好樂卟見麵 · 2019-12-21 20:32:01 发布

1.安装vue-cli 最新版

在桌面启动cmd命令窗口，执行下面命令，全局安装（可以先卸载之前的vue版本   npm uninstall vue-cli -g ）

npm install -g @vue/cli
npm install -g @vue/cli-init

查看当前版本

vue -V

2. vue-cli搭建脚本文件

以搭建一个项目名称为my的Vue前端项目为例

vue create my

2.1 根据提示进行相应的配置（以手动配置为例）

┌───────────────────────────────┐
│ ✨  Update available: 4.1.1 ✨  │
└───────────────────────────────┘
? Please pick a preset:
  default (babel, eslint)
> Manually select features

2.2 选择项目需要的一些特性（此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、以及单元测试，暂时不考虑端到端测试(E2E Testing)）（选择需要什么的时候，输入数字键盘）

┌───────────────────────────────┐
│ ✨  Update available: 4.1.1 ✨  │
└───────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 () Linter / Formatter
>(*) Unit Testing
 ( ) E2E Testing

2.3 选择CSS预处理器语言，此处选择LESS

┌───────────────────────────────┐
│ ✨  Update available: 4.1.1 ✨  │
└───────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
  LESS
  Stylus

2.4. 选择何时进行代码检测，此处选择在保存时进行检测

Vue CLI v3.0.0-beta.6
┌───────────────────────────────┐
│ ✨  Update available: 4.1.1 ✨  │
└───────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? 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 (requires Git)

2.5. 选择单元测试解决方案，此处选择 Jest

Vue CLI v3.0.0-beta.6
┌───────────────────────────────┐
│ ✨  Update available: 4.1.1 ✨  │
└───────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? 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
? Pick a unit testing solution:
  Mocha + Chai
> Jest

2.6. 选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中

Vue CLI v3.0.0-beta.6
┌───────────────────────────────┐
│ ✨  Update available: 4.1.1 ✨  │
└───────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? 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
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

2.7. 是否保存当前配置,如果选Y会要求输入配置名字输入 N 回车

PS E:\项目> vue create my


Vue CLI v4.1.1
? 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)Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v4.1.1
✨  Creating project in E:\项目\my.
⚙  Installing CLI plugins. This might take a while...


> core-js@3.6.0 postinstall E:\项目\my\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall E:\项目\my\node_modules\ejs
> node ./postinstall.js

added 1112 packages from 823 contributors and audited 19026 packages in 74.51s

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

found 0 vulnerabilities

🚀  Invoking generators...
📦  Installing additional dependencies...

added 14 packages from 66 contributors and audited 19116 packages in 18.763s

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

found 0 vulnerabilities

⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd my
 $ npm run serve

搭建完成按照最后给的命令来启动项目

目录结构 （目录注释，是按照我的开发习惯来注释的，不对之处还请谅解）


 - my
 	- node_modules   														//node依赖
 	- public 
 		- favicon.ico      													//浏览器窗口 logo
 		- index.html       													//主html
 	- src
 		- assets															//存放静态资源的目录
 			-logo.png 
 		- components														//一般作为公共组件的目录
 			- HelloWorld.vue													
 		- router															//路由文件
 			- index.js
 		- store																//vuex目录
 			-index.js	 																
 		- views																//菜单栏文件
 			-About.vue
 			-Home.vue												
 		- App.vue															
 		- main.js
 	- .browserslistrc
 	- .gitignore
 	- babel.config.js
 	- package.json		
 	- package-lock.json
 	- README.md