Vue3——创建Vue3工程

基于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. TypeScriptJSXCSS 等支持开箱即用。
  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

运行成功:

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