新建一个小而全的vue3项目
-
准备工作
安装node - 安装vue脚手架...
检查版本：node -v npm -v vue -V
image-20210324103256277.png
-
新建项目
- vue create [项目名称]：vue create vue3-todolist
image-20210324103644960.png
* 选择手动创建：Manually select features
* 选择要安装的插件：上下箭头移动，空格键选择取消，Enter键确认
* Choose Vue version 必选，因为是要学习vue3.0
* babel 要选
* TypeScript 可不选
* P.....可不选
* Router 非必选
* Vuex 非必选
* Css预编译工具 非必选(但这是好东西，建议学习)
* 代码规范工具，就是es-linter（建议选，随时好习惯）
* 单元测试和E2E测试不选
image-20210324104201281.png
* 选择版本：因为上面勾选了Choose Vue version，选3.x
image-20210324104400663.png
* 是否以history...作为路由模式：Y
image-20210324104557144.png
* 选择css预编译工具
image-20210324104650048.png
* 选择eslint的一种格式化方式
image-20210324152315530.png
* ESLint with error prevention only
> 只配置使用 ESLint 官网的规范
* ESLint + Airbnb config 爱彼迎规范
> ESLint 官网推荐的规范 + Airbnb 爱彼迎第三方配置
* ESLint + Standard config 通用规范
> ESLint 官网推荐的规范 + Standard 常规的第三方配置
* ESLint + Prettier 比较漂亮的规范
> 使用 ESLint 官网推荐的规范 + Prettier 第三方的配置 Prettier 是单独的文件，可做风格统一，代码格式化工具
* 选择lint生效的时机，保存的时候还是提交的时候
image-20210324152427815.png
* 选择配置文件存放的位置
* 单独文件
* 放在package.json文件中
image-20210324152605760.png
* 是否保存为默认的配置
image-20210324152730600.png
* 预设起一个名字
image-20210324152831544.png
完整如下：
image-20210324152900281.png
创建成功，打开项目
-
打开项目
image-20210324154037496.png
- 启动项目
image-20210324154142072.png
- 网页中打开
image-20210324154318096.png
image.png
* 有错误欢迎指出