VUE3+TS学习-项目搭建

简介: 笔记

vue3和vue2的项目安装基本没太大区别。


1.node安装


方式一:nvm安装node

个人比较喜欢使用nvm控制node版本,切换版本自如。

nvm下载地址:https://github.com/coreybutler/nvm-windows/releases

node包下载地址:https://nodejs.org/download/release/{node版本}

方式二:直接安装node

node下载地址https://nodejs.org/zh-cn/download/


2.安装VUE-CIL 3.x


搭建vue3的项目,需要依赖VUE-CIL 3.0或者更高版本。

可以先查看版本号:

// 查看版本号
vue -V

1.png

如果是旧版本,Vue-cli1.x 或者 Vue-cli2.x这类,需要先卸载。(如若没有 请忽略该步骤)

npm uninstall vue-cli -g//卸载版本

2.png

下载合适的版本号:

// 安装最新版的vue-cli
npm install -g @vue/cli

3.png

 

3.新建项目步骤


vue create //新建项目代码
图例是创建名叫vue3learn的vue3的项目

4.png

 

 

回车后返回:

5.png

  • Default:默认的预设配置,会快速构建一个项目,提供了babel和eslint的支持(第一个‘([Vue 3] babel, eslint)’vue3的项目)
  • Manually select features:手动进行项目配置,可以根据项目的需要选择合适的依赖,具备更多的选择性,以下步骤,我将会采用该种方式。

可选择方法一:

直接使用默认的vue3预设配置:

6.png

 

$ cd vue3learn//进入项目
 $ npm run serve//启动项目

7.png

8.png

将地址复制到浏览器:

9.png

 

至此,默认配置情况下的vue3项目配置完成。

可选择方法二:手动配置

Vue-cli提供以下特性供选择,可根据项目需要进行选择添加的配置项:

10.png

通过上下键进行配置项切换,对需要选择的配置项使用空格键进行选中/反选

  • 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(端到端)是黑盒测试的一种

注:本次操作在第一处回车,实际项目开发可按需选择

1.Choose a version of Vue.js that you want to start the project with

(选择vue版本)

因为本次项目需要使用vue3,选择第一个。

11.png

2.Pick a linter / formatter config: (Use arrow keys)

(选择一种代码格式化检测工具)

12.png

ESLint with error prevention only: ESLint 只会进行错误提醒

ESLint + Airbnb config: ESLint Airbnb标准

ESLint + Standard config: ESLint Standard 标准

ESLint + Prettier: ESLint(代码质量检测)+ Prettier(代码格式化工具)


3.Pick additional lint features: (Press  to select, to toggle all, to invert selection, and  to proceed)

(代码检查方式 )

13.png

Lint on save:保存时检查

Lint and fix on commit:提交时检查


4.Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

(Babel, ESLint, etc.等配置文件怎么存放)

14.png

In dedicated config files:放到单独的配置文件中

In package.json:放到package.json里


5. Save this as a preset for future projects? (y/N)

(是否需要保存当前配置,在以后的项目中可快速构建?)

15.png

输入y:后续创建项目时可以直接选择该配置, 不需单独配置

输入N:否


6.项目加载:


16.png17.png

$ cd vue3learn//进入项目
 $ npm run serve//启动项目

18.png19.png

将地址复制到浏览器:

20.png

 

至此,默认配置情况下的vue3项目配置完成。

目录
相关文章
|
1天前
Vue3 中使用 Event Bus
【10月更文挑战第16天】Event Bus 是 Vue3 中一种简单而实用的通信方式,在一些简单的场景中可以发挥重要作用。但在实际应用中,要根据项目的具体需求和复杂度,选择合适的通信方式,以实现最佳的性能和可维护性。同时,要遵循最佳实践,合理使用 Event Bus,避免出现问题。
10 5
|
1天前
|
前端开发 UED
vue3知识点:Suspense组件
vue3知识点:Suspense组件
11 4
|
1天前
|
JavaScript 前端开发 Java
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
10 2
|
1天前
|
Java
vue3知识点:Teleport组件
vue3知识点:Teleport组件
10 1
|
7天前
|
JavaScript 前端开发 API
深入探索挖掘vue3 生命周期
【10月更文挑战第10天】
20 0
|
3天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
27 7
|
3天前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
15 1
|
2天前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说,动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性,它们为我们提供了更灵活和高效的组件管理方式,使我们能够更好地构建复杂的应用界面。深入理解和掌握它们,以便在实际开发中能够充分发挥它们的优势,提升我们的开发效率和应用性能。
29 18
|
1天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
14 7
|
1天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
14 6