vue3 - 创建一个vue3工程

官方文档: 快速上手 | Vue.js

vue 是什么

一套用于构建用户界面的渐进式JavaScript 框架

(把获取到的数据变成用户看到的界面)

Vue 特点

1. 采用组件化模式,提高代码复用率,且让代码更好维护

2. 声明式编码,让开发人员无需直接操作DOM,提高开发效率

3. 使用虚拟DOM+优秀的DIff算法,尽量复用DOM节点

安装环境(npm)
  • 检查系统npm ,node 版本,版本过低可能无法创建工程
  • nodejs 下载:  https://nodejs.org
  • 下载对应系统安装包,直接安装/覆盖安装 即可
192:~$ node -v
v21.7.3

192:~ $ npm -v
10.5.0

创建Vue工程
  • npm create vue@latest
  • npm init vue@latest
192:$ npm init vue@latest

Vue.js - The Progressive JavaScript Framework

✔ 请输入项目名称: … vue3_hello
✔ 是否使用 TypeScript 语法&#x
### 创建 Vue 3 工程 #### 使用 `npm` 初始化最新版 Vue 项目 为了创建最新的 Vue 3 项目,可以采用如下命令来初始化: ```bash npm init vue@latest ``` 这条命令会引导用户完成一系列配置选项的选择过程,从而建立基于最先进版本的 Vue 项目的开发环境[^1]。 #### 安装依赖并启动项目 一旦选择了所需的配置项之后,进入新创建的项目文件夹,并安装必要的依赖包以及运行应用: ```bash cd hello3-vue3 npm install npm run dev ``` 这将下载所有必需的库并且启动本地服务器以便于开发者查看实时效果。 #### 配置 ESLint (如果之前未选择) 对于那些在初始设置过程中忽略了ESLint配置选项的情况,在后续可以通过执行下面的指令来进行补充安装: ```bash pnpm install eslint ``` 此操作能够确保代码风格的一致性和质量控制[^3]。 #### 路由与状态管理基础配置 当涉及到页面间的导航时,可以在 `App.vue` 文件内定义路由链接和视图容器;而对于复杂的状态处理,则推荐引入 Pinia 或 Vuex 来作为全局状态管理者。例如,在模板部分添加两个简单的路由连接至 `/login` 和 `/main` 页面,并放置 `<router-view>` 组件用于展示匹配到的具体组件内容: ```html <template> <div id="app"> <router-link to="/login">登录</router-link> <router-link to="/main">首页</router-link> <router-view></router-view> </div> </template> ``` 此外,还需要进一步完善路由表和其他相关逻辑以支持上述功能[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值