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项目配置完成。

目录
相关文章
|
14天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
117 64
|
14天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
25 8
|
13天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
19 1
|
13天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
26 1
|
14天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
18天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
19天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
21天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
24 1
vue学习第一章
|
21天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
23 1
vue学习第三章
|
21天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章