vue3项目搭建

---

vue3项目搭建

---

提示：编辑器为vscode，终端指令都在vscode终端中进行

1 在要创建项目的文件夹根目录下执行以后命令

vue create demo（项目名称，用户自定义，英文）

命令输入完成，回车确认后，出现如下截图：

1. Default ([Vue 3] babel, eslint) ----- vue3默认配置
2. Default ([Vue 2] babel, eslint) ----- vue2默认配置
3. Manually select features ----- 用户自定义，手动选择功能

2 我们一般选择3，通过向下箭头，移动到Manually select features位置，回车确认

下面是让我们选择要使用的配置项：

( ) Babel ------ js编译器，可以部分浏览器不兼容的js高版本语法编译为浏览器支持的语法，js兼容
( ) TypeScript ----- 是否使用TypeScript
( ) Progressive Web App (PWA) Support ----- 渐进式Web应用
( ) Router ------ 是否使用 Router
( ) Vuex ------ 是否使用 Vuex
( ) CSS Pre-processors ------ 是否使用 css预处理器
( ) Linter / Formatter ----- 代码风格/格式化，对代码格式的约束，多人协作时，可统一代码风格
( ) Unit Testing ----- 单元测试
( ) E2E Testing ----- e2e测试

此次我们选择Babel Router Router CSS Pre-processors Linter / Formatter，空格选择，回车确认进入下一页面。

3 此时让我们选择vue的版本，我们选择3.x，回车确认。

4 是否选择history模式路由

vue路由中，有两个模式，history模式，和hash模式，具体区别我们不做过多讲解，如果在url中有#作为分割的，一半为hash模式，没有#，为history模式
下面为实例url

哈希模式
https://fanyi.baidu.com/#zh/en/%E5%93%88%E5%B8%8C 
history模式
https://www.runoob.com/vue3/vue3-ajax-axios.html

此时我选择n，即使用哈希模式，这个依据个人习惯和项目要求，我选择的是哈希模式。回车确认

5 选择css预处理器

该项目，我选择less，依据个人习惯，和项目要求。回车确认

6 选择代码风格规则

ESLint with error prevention only ---- 只配置使用 ESLint 官网的推荐规则
ESLint + Airbnb config ---- 使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置
ESLint + Standard config ---- 使用 ESLint 官网推荐的规则 + Standard 第三方的配置
ESLint + Prettier ---- ESLint + Prettier 比较漂亮的规范
依据个人习惯进行选择即可，我选择的是第三个。回车确认。

7 代码检查触发时机

( ) Lint on save ---- 保存后检测
( ) Lint and fix on commit ---- commit时检测

我建议选择保存后坚持，搭配vscode的失去焦点自动保存文件一起使用。选择后回车确认

8 配置项的存放位置

bable和eslint等配置内容是是在package.josn中还是单独的文件。

In dedicated config files ----- 在单独的配置文件中
In package.json ----- 在package.josn中
建议选择，在单独的配置文件中。回车确认。

9 是否把本次配置保存为预设配置

输入n即可，不保存，回车确认。此时开始执行项目安装，等待完成即可

安装完成后，cd到项目目录，执行npm run serve

此时原始项目搭建完成。