创建vue3工程

创建方式

  1. 基于 vite 创建(vue3官方推荐)
  2. 基于 vue-cli 创建

基于 vite 创建

vite 官方文档

vite 是新一代前端构建工具,优势如下:

  • 轻量快速的热重载(HMR),能实现极速的服务启动。
  • TypeScriptJSXCSS 等支持开箱即用。
  • 真正的按需编译,不再等待整个应用编译完成。
  • webpack构建 与 vite构建对比图如下:
webpack构建 vite构建
## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

项目目录结构:

my-vue3-project/
├── public
### 创建Vue3工程的步骤 #### 1. 准备工作 在开始创建Vue3项目之前,需要确保以下软件和工具已经安装: - **VSCode**:一款轻量级且功能强大的代码编辑器。 - **Node.js**:用于运行JavaScript代码,安装完成后可以通过命令行检查版本号 `node -v` 来确认是否安装成功。 #### 2. 创建Vue3项目 创建Vue3项目的步骤如下: 1. **打开终端**:找到要创建项目的文件目录,右键选择“在此处打开终端”。 2. **运行创建命令**:在终端中输入以下命令来创建Vue3项目: ```bash npm create vue@latest ``` 3. **配置项目需求**:根据提示输入项目名称并选择项目需要的功能。 4. **完成创建**:按下回车键完成项目的创建过程。 #### 3. 打开Vue3项目 1. **在VSCode中打开项目文件夹**:通过VSCode打开已经创建好的Vue3项目文件夹。 2. **安装依赖**:在终端中输入以下命令来安装项目所需的依赖: ```bash npm i ``` 3. **运行项目**:使用以下命令启动项目: ```bash npm run dev ``` #### 4. 项目文件结构 Vue3项目通常包含以下主要文件和文件夹: - **node_modules**:存放项目依赖的模块。 - **public**:存放不会被Webpack编译压缩处理的文件,例如第三方库的JS文件。 - **src**:项目的主目录,包含主要的源代码文件。 - **.gitignore**:配置Git提交项目代码时忽略的文件或文件夹。 - **babel.config.js**:Babel使用的配置文件。 - **package.json**:npm的配置文件,设定脚本和项目依赖的库。 - **package-lock.json**:锁定项目实际安装的各个npm包的具体来源和版本号。 - **README.md**:项目说明文件。 #### 5. 安装VSCode插件 为了更好地开发Vue3项目,建议安装以下VSCode插件: - **Vetur**:提供Vue代码高亮显示等功能。 - **ESLint**:用于代码规范检查。 #### 6. 配置VSCode工作环境 1. **打开设置**:点击“文件” -> “首选项” -> “设置”。 2. **编辑settings.json**:在设置界面右侧添加配置,点击“在settings.json中编辑”,进入代码编辑界面,输入以下配置: ```json { "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" } } ``` ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值