Vue3——创建Vue3工程

基于Vue-Cli创建

现在官方推荐使用 create-vue 来创建基于 Vite 的新项目(⚠️ Vue CLI 现已处于维护模式!)

1.   # 查看@vue/cli版本号，确保@vue/cli版本在4.5.0以上
2.   vue --version
4.   # 没有安装@vue/cil或者版本不在4.5.0以上执行命令
5.   # 安装或升级@vue/cli（确保安装了node.js）
6.   npm install -g @vue/cil
8.   # 执行创建项目命令
9.   # vue create [项目名字]
10.   vue create myVueProject
12.   # 选择Vue的版本：3.x
13.   #  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
14.     > 3.x
15.       2.x
17.   # 启动创建好的项目
18.   # cd 到项目目录
19.   cd myVueProject
20.   # 启动项目
21.   npm run serve

复制代码

基于Vite创建（推荐使用这种方式创建）

• 轻量快速的热重载（HMR），能实现极速的服务启动。
  
• 对 TypeScript、JSX、CSS 等支持开箱即用。
  
• 真正的按需编译，不再等待整个应用编译完成。
  官方文档
  

1.   # 创建Vue3工程命令
2.   npm create vue@lastest
3.   
4.   # 初始化项目配置（根据自己的需求进行配置）
5.   #配置项目名称
6.   √ Project name: myVueProject
7.   # 是否添加TypeScript支持（No的话，使用js,建议选择yes）
8.   √ Add TypeScript?  Yes
9.   # 是否添加JSX支持
10.   √ Add JSX Support?  No
11.   # 是否添加路由环境
12.   √ Add Vue Router for Single Page Application development?  yes
13.   # 是否添加pinia环境
14.   √ Add Pinia for state management?  yes
15.   # 是否添加单元测试
16.   √ Add Vitest for Unit Testing?  No
17.   # 是否添加端到端测试方案
18.   √ Add an End-to-End Testing Solution? » No
19.   # 是否添加ESLint语法检查
20.   √ Add ESLint for code quality?  Yes
21.   # 是否添加Prettiert代码格式化
22.   √ Add Prettier for code formatting?  No
24.   #启动创建好的项目
25.   # cd 到项目目录
26.   cd myVueProject
27.   
28.   #下载包
29.   npm install
30.   
31.   # 启动项目
32.   npm run dev

复制代码

运行成功：

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！