新建一个小而全的vue3项目

1. 准备工作

   安装node - 安装vue脚手架...

   检查版本：node -v npm -v vue -V

image-20210324103256277.png

2. 新建项目

   • 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

  * 有错误欢迎指出