CSDN

Vue3——创建Vue3工程

2024-06-11 11:50 由 么么^ 发表于 #前端开发

基于Vue-Cli创建

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

  # 查看@vue/cli版本号，确保@vue/cli版本在4.5.0以上
  vue --version

  # 没有安装@vue/cil或者版本不在4.5.0以上执行命令
  # 安装或升级@vue/cli（确保安装了node.js）
  npm install -g @vue/cil

  # 执行创建项目命令
  # vue create [项目名字]
  vue create myVueProject

  # 选择Vue的版本：3.x
  #  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
    > 3.x
      2.x

  # 启动创建好的项目
  # cd 到项目目录
  cd myVueProject
  # 启动项目
  npm run serve

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

  1. 轻量快速的热重载（HMR），能实现极速的服务启动。
  2. 对 TypeScript、JSX、CSS 等支持开箱即用。
  3. 真正的按需编译，不再等待整个应用编译完成。
    官方文档
  # 创建Vue3工程命令
  npm create vue@lastest
  
  # 初始化项目配置（根据自己的需求进行配置）
  #配置项目名称
  √ Project name: myVueProject
  # 是否添加TypeScript支持（No的话，使用js,建议选择yes）
  √ Add TypeScript?  Yes
  # 是否添加JSX支持
  √ Add JSX Support?  No
  # 是否添加路由环境
  √ Add Vue Router for Single Page Application development?  yes
  # 是否添加pinia环境
  √ Add Pinia for state management?  yes
  # 是否添加单元测试
  √ 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

  #启动创建好的项目
  # cd 到项目目录
  cd myVueProject
  
  #下载包
  npm install
  
  # 启动项目
  npm run dev

运行成功：

热门相关：重生娘子在种田   狂仙   重生八零俏佳妻   宠妻入骨：神秘老公有点坏   千夫斩