vue3项目搭建

升级脚手架

首先 win+r是打开电脑命令窗口的快捷组合键 cmd 进入
输入指令查看版本 vue -V
3.0版本需要把脚手架升级成4的
如果之前安装过vue-cli需要卸载之后重新安装 cnpm uni -g vue-cli
如果没有安装过不需要卸载可以直接安装 cnpm i -g @vue/cli
最后再查看版本 vue -V 是 @vue/cli 4.5.13 vue-cli的4.0版本就安装好了

选择初始化项目的配置

新建空白文件夹
通过 Git Bash Here 打开黑窗口

vue create vue3(项目名)

输入指令 vue create vue3(项目名)
Default是自动安装

选择 Manually select features 进行手动配置

Vue CLI v4.5.13
Default ([Vue 2] babel, eslint)  
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features  # 手动选择功能

项目配置 :

Vue CLI v4.5.13
? 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) 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 

按照自己的需求选择 以上是我的选择 ts厉害的可以选择ts编写

*Choose Vue version  选择版本
*Babel : 使用babel，便于将我们源代码进行转码（把es6=>es5）
TypeScript：使用TypeScript进行源码编写，使用ts可以编写强类型js，对我们的开发有很大的好处
Progressive Web App(PWA)：使用渐进式网页应用（PWA）
*Router：使用vue-router
*Vuex：使用vuex状态管理器
*CSS Pre-processors：CSS 预处理器，比如：less，sass等
*Linter/Formatter：使用代码风格检查和格式化
Unit Testing：使用单元测试
E2E Testing：E2E（End To End）即端对端测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常，程序流数据传递如预期

选择版本，我这里选择3.x

2.x
3.x (Preview) 

Use history mode for router

路由模式, 是否选择history模式，启用history模式，项目build之后，可能会出现打开页面空白的情况哦。我这里选择no

Pick a CSS pre-processor

选择一种css 预处理器 我选的第二种

Sass/Scss (with dart-sass)
Sass/SCss (with node-sass )
Less 
Stylus

选择编码规则 Pick a linter / formatter config

选择一种代码格式化检测工具，这里我选择第一个

*ESLint with error prevention only: ESLint 只会进行错误提醒
*ESLint + Airbnb config: ESLint Airbnb标准
*ESLint + Standard config: ESLint Standard 标准
*ESLint + Prettier: ESLint（代码质量检测）+ Prettier（代码格式化工具）

Pick additional lint features

代码检查方式: 保存时检查 or 提交时检查 我选择, 保存时检查 选择的第一个

(*) Lint on save
( ) Lint and fix on commit

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

您更喜欢在哪里放置Babel、postss、ESLint等的配置。？

Where do you prefer placing config for Babel, ESLint, etc.?
*In dedicated config files #在专用配置文件中
In package.json 

这里方便配置清晰好看, 我选择每个配置单独文件

Save this as a preset for future projects?

Save this as a preset for future projects? (y/N)    
//是否将此作为未来项目的预设(是/否）

可以选择N 不保存 直接开始安装
也可以选择 y
确认会问

Save preset as :
//将预设另存为 :

给一个名字(可以随便写) 没有给路径，运行会提示保存在哪里

Save preset as : Newsettings

之后开始安装
安装完成 cd 上一层

npm run serve

项目创建完成 访问项目

vue3.0项目搭建到此已经完成