Vue3 创建项目流程(vue create xxx)

简介: Vue3 创建项目流程(vue create xxx)

一、安装

  • 如果电脑上已经安装的 vue-cli 是老版本,没法选择 vue3,卸载重新装。
$ npm uninstall vue-cli -g
  • 全局安装,默认安装最新版本
$ npm install -g @vue/cli
  • 检查是否安装成功
$ vue --version

二、创建项目

  • 创建项目
$ vue create 项目名
  • 选择配置模式,进行初始化项目。
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)  // 默认 vue3 配置
  Default ([Vue 2] babel, eslint)  // 默认 vue2 配置
❯ Manually select features         // 手动选择配置
  • 选择 Default 直接创建项目,包括 babel、eslint 这些工具,其他 Router、Vuex 等其他依赖需要自己手动安装。
  • 如果选择了 Manually select features(手动安装),则会进入配置选项
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◉ Babel                              // 代码编译
 ◉ TypeScript                         // ts
 ◯ Progressive Web App (PWA) Support  // 支持渐进式网页应用程序
 ◉ Router                             // vue路由
 ◉ Vuex                               // 状态管理模式
 ◉ CSS Pre-processors                 // css预处理
 ◯ Linter / Formatter                 // 代码风格、格式校验(个人不喜欢受约束)
 ◯ Unit Testing                       // 单元测试
 ◯ E2E Testing                        // 端对端测试
  • 一般正常项目开发只需要 BabelRouterVuex 即可开始,根据自己喜好可以加上 CSS Pre-processorsLinter / Formatter
    如果希望使用 TypeScript 来代替 JavaScript 进行开发,可以勾选下。
  • 版本选择
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x 
  2.x
  • 是否使用 class 风格的组件语法?
? Use class-style component syntax? (y/N) n
  • 如果习惯了 vue 的原生开发风格,建议选 n什么是 class 风格的组件语法?

    上图是选 n 的代码风格,下图是选 y 的代码风格。
  • 是否使用 BabelTypeScript 一起用于自动检测的填充?
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y
  • 这里一定要选 y
  • 是否使用 class 风格的组件语法?
? Use class-style component syntax? (y/N) y
  • 如果在项目中想要保持使用 TypeScriptclass 风格的话,建议选 y
  • 路由是否使用 history 模式?
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
  • 这里根据情况选择,但是一般项目情况下选 y 会实用点。
  • 选择一种 CSS 预处理类型
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):  
  Sass/SCSS (with dart-sass) 
❯ Less 
  Stylus
  • 看个人使用习惯,没什么好纠结的。
  • 配置文件存储位置
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files  // 存放在专用配置文件中,也就是独立文件存储
  In package.json            // 存放在 package.json 中
  • 是否保存当前选择的配置项?
? Save this as a preset for future projects? (y/N) n
  • 也就是是否把当前的这次配置保持,下次再新建项目的时候,可以选择这个配置项直接创建项目,类似开始的 Default 选项,可以快捷创建项目,看自己喜好。
  • 项目创建完成!各回各家!

相关文章
|
3天前
|
缓存 JavaScript 前端开发
Vue 3的响应式系统
【5月更文挑战第31天】Vue 3的响应式系统
8 1
|
4天前
|
JavaScript 程序员 网络架构
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
|
4天前
|
资源调度 JavaScript UED
vue路由的基础知识总结,vueRouter插件的安装与使用
vue路由的基础知识总结,vueRouter插件的安装与使用
|
4天前
|
JavaScript
|
4天前
|
JavaScript 前端开发 API
vue2 /vue3【nextTick】的使用方法及实现原理,一文全搞懂!
vue2 /vue3【nextTick】的使用方法及实现原理,一文全搞懂!
|
4天前
|
JavaScript 开发者
[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法
[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法
[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法
|
4天前
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
993 0
|
4天前
|
JavaScript 前端开发 安全
Vue响应式设计
【5月更文挑战第30天】Vue响应式设计
25 1