vue3项目搭建
提示:编辑器为vscode,终端指令都在vscode终端中进行
1 在要创建项目的文件夹根目录下执行以后命令
vue create demo(项目名称,用户自定义,英文)
命令输入完成,回车确认后,出现如下截图:
- Default ([Vue 3] babel, eslint) ----- vue3默认配置
- Default ([Vue 2] babel, eslint) ----- vue2默认配置
- 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
此时原始项目搭建完成。