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

目录
相关文章
|
7天前
|
JavaScript 前端开发 UED
vue2和vue3的响应式原理有何不同?
大家好,我是V哥。本文详细对比了Vue 2与Vue 3的响应式原理:Vue 2基于`Object.defineProperty()`,适合小型项目但存在性能瓶颈;Vue 3采用`Proxy`,大幅优化初始化、更新性能及内存占用,更高效稳定。此外,我建议前端开发者关注鸿蒙趋势,2025年将是国产化替代关键期,推荐《鸿蒙 HarmonyOS 开发之路》卷1助你入行。老项目用Vue 2?不妨升级到Vue 3,提升用户体验!关注V哥爱编程,全栈开发轻松上手。
|
10天前
|
JavaScript 前端开发 算法
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图
mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具,可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外,mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10天前
|
JavaScript 前端开发 API
你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解
onMounted作为vue3中最常用的钩子函数之一,能够灵活、随心应手的使用是每个Vue开发者的必修课,同时根据其不同写法的特性,来选择最合适最有利于维护的写法。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
20天前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
|
10天前
|
JavaScript 前端开发 API
管理数据必备;侦听器watch用法详解,vue2与vue3中watch的变化与差异
一篇文章同时搞定Vue2和Vue3的侦听器,是不是很棒?不要忘了Vue3中多了一个可选项watchEffect噢。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
177 1
|
20天前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
96 56
|
10天前
|
数据采集 资源调度 JavaScript
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具,适合自定义复杂的流程图。文章从环境要求(Node.js v20+ 和 Vue 3.3+)、基础入门案例、自定义功能(节点与连线的定制、事件处理)到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性,虽然预定义内容较少,但提供了丰富的 API 支持深度定制。同时,文中还分享了关于句柄(handles)的使用方法,以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid,总结 Vue Flow 更适合需要高度自定义和复杂需求的场景,并附带多个相关技术博客链接供进一步学习。
|
10天前
|
存储 数据采集 供应链
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
1月前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。