vue3 两种创建方式详解(cli和vite)

leolee18
1,279 阅读3分钟

vue3的创建方式

  1. 安装node.js
  2. 安装vue-cli
  3. 创建vue项目
  4. 运行项目

前提条件

// @vue/cli版本在4.5.0以上
// 需要node版本10以上

// 查看方式
vue --version
node -V
npm -V

// 安装或者升级方式
// 1.卸载旧的
npm uninstall vue-cli -g

// 2.安装新的
npm install -g @vue/cli

一、创建vue3项目,使用vue-cli创建

  1. 打开终端，进入要创建项目的文件夹。
  2. 运行vue create命令，后面跟上项目名称。
vue create vue3-project
  1. 上下键选择这个自定义的版本(Manually select features)，然后回车。
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
❯ Manually select features
  1. 选择你需要的功能，按空格键选择，按a键全选，按i键反选，按enter键确定。
 ◉ Choose Vue version
 ◉ Babel //javaScript编译器,将代码向后兼容
 ◉ TypeScript //使用 ts 编程语言
 ◯ Progressive Web App (PWA) Support //APP 使用
 ◉ Router //添加路由
 ◉ Vuex //vuex状态管理
 ◉ CSS Pre-processors //css预处理器
❯◉ Linter / Formatter //严格代码规范
 ◯ Unit Testing //单元测试
 ◯ E2E Testing //端到端测试
  1. 选择vue版本
  2.x 
❯ 3.x (Preview)
  1. 配置信息选择
? Use class-style component syntax? No //是否使用Class风格装饰器？可以不加
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? Yes //JSX
? Use history mode for router? (Requires proper server setup for index fallback 
in production) No //history是路由是否为哈希模式，这里选否，哈希模式路径要加#
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS (with dart-sass) //CSS预处理器
? Pick a linter / formatter config: Basic
// ESLint with error prevention only 指仅用于错误预防
// ESLint + Airbnb config 指ESLint 和Airbnb代码规范
// ESLint + Standard config 指ESLint 和Standard代码规范
// ESLint + Prettier 指ESLint 和Prettier代码规范
// 这里先选默认ESLint with error prevention only
? Pick additional lint features: Lint on save //是严格模式，代码格式不规范也会报错
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi
g files //项目的配置文件存放在哪儿（1是独立文件，2是在package.json）这里选择独立的文件
? Save this as a preset for future projects? No //是否保存，选是的话会记住这次的配置
? Pick the package manager to use when installing dependencies: NPM //npm还是yarn
  1. 运行项目
cd vue3-project
npm run serve

二、vue3的创建方式,使用vite创建

  1. 打开终端，进入要创建项目的文件夹。
  2. 输入npm create vite@latest命令。
npm create vite@latest
//
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) //回车

Project name: … vite-vue3-app //项目目录
  1. 选择一个框架
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
❯   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
  1. 选择一个模板
? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    JavaScript
    Customize with create-vue ↗
    Nuxt ↗
  1. 安装运行
  cd vite-vue3-app
  npm install
  npm run dev

源码下载:https://gitee.com/leolee18/vue3-project

系列文档

vue3 两种创建方式详解(cli和vite)
vue.config.js/vite.config…
vue3 自动引入自定义组件
vueX vue3自动引入匹配的modules
vue3 自定义指令控制按钮权限的操作
vuex与axios网络请求解耦
移动端rem适配布局

avatar
文章
阅读
粉丝