创建vue3项目脚手架

使用 Vite 创建项目

Vite 是由 Vue 作者尤雨溪先生带领团队开发的一个构建工具,它利用浏览器原生支持 ES 模块的特点,极大提升了开发体验,自 2021 年 1 月份发布 2.0 版本以来,发展非常快,笔者也在第一时间参与贡献了一些文档和插件,并且在 2021 年期间,个人项目已经全面切换到 Vite ,公司业务也在 2021 年底开始使用 Vite 创建新项目,整体情况非常稳定,前景非常乐观。

推荐以下这几种创建 Vite 项目的方式:Create Vite、Create Vue 和 Create Preset。

Create Vite

Create Vite 是 Vite 官方推荐的一个脚手架工具,可以创建基于 Vite 的不同技术栈基础模板。

运行以下命令创建模板项目,再按照命令行的提示操作(选择 vue 技术栈进入),即可创建一个基于 Vite 的基础空项目。

npm create vite

不过这个方式创建的项目非常基础,如果需要用到 Router 、 Vuex 、 ESLint 等程序,都需要再单独安装和配置,所以推荐使用 Create Preset。

Create Vue

Create Vue 是 Vue 官方推出的一个新脚手架,用以代替基于 Webpack 的 Vue CLI ,它可以创建基于 Vite 的 Vue 基础模板。

运行以下命令创建模板项目,然后根据命令行的提示操作即可。

npm init vue@3

Create Preset

Create Preset 是 Awesome Starter 的 CLI 脚手架,提供快速创建预设项目的能力,可以创建一些有趣实用的项目启动模板,也可以用来管理的常用项目配置。

简单使用

可以通过包管理器直接创建配置,然后按照命令行的提示操作,即可创建开箱即用的模板项目。

npm create preset

在这里选择 vue 技术栈进入,选择 vue3-ts-vite 创建一个基于 Vite + Vue 3 + TypeScript 的项目启动模板。

如果下载失败,可以通过 npm create preset proxy on 开启加速镜像代理下载。

全局安装

也可以像使用 @vue/cli 一样,全局安装到本地,通过 preset init 命令来创建项目。

推荐全局安装它,用起来更方便,请先全局安装:

npm install -g create-preset

可以通过下面这个命令来检查安装是否成功,如果成功,将会得到一个版本号:

preset -v

然后可以通过 --template 选项直接指定一个模板创建项目,在这里使用 vue3-ts-vite 模板创建一个名为 hello-vue3 的项目:

preset init hello-vue3 --template vue3-ts-vite

常用的项目模板也可以绑定为本地配置,点击 Create Preset 官方文档 查看完整使用教程。

使用 @vue/cli 创建项目

如果不习惯 Vite ,依然可以使用 Vue CLI 作为开发脚手架。

和 Vite 的区别

Vue CLI 使用的构建工具是基于 Webpack。

更新 CLI 脚手架

请先全局安装,把脚手架更新到最新版本(最低版本要求在 4.5.6 以上才能支持 Vue 3 项目的创建)。

npm install -g @vue/cli

使用 CLI 创建 3.x 项目

Vue CLI 全局安装后,可以在命令行输入 vue 进行操作,创建项目使用的是 create 命令:

vue create hello-vue3

由于要使用 TypeScript ,所以需要选择最后一个选项来进行自定义搭配,通过键盘的上下箭头进行切换选择:

Vue CLI v5.0.4
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features

多选菜单可以按空格选中需要的依赖,总共选择了下面这些选项:

Vue CLI v5.0.4
? Please pick a preset: 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
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

选择 Vue 版本,要用 Vue 3 所以需要选择 3.x :

? Choose a version of Vue.js that you want to start the project with
  (Use arrow keys)
> 3.x
  2.x

是否选择 Class 语法的模板,在 Vue 2 版本为了更好的支持 TypeScript ,通常需要使用 Class 语法,由于 Vue 3 有了对 TypeScript 支持度更高的 Composition API ,因此选择 n ,也就是 “否” :

? Use class-style component syntax? (y/N) n

Babel 可以把新版本的 JavaScript 语句转换为兼容性更好的低版本 Polyfill 写法,所以选 y 确认使用:

? Use Babel alongside TypeScript
  (required for modern mode, auto-detected polyfills, transpiling JSX)?
  (Y/n) y

接下来是选择路由模式,选 y 启用 History 模式,选 n 使用 Hash 模式,可根据项目情况选择。

建议先选 y 确认,如果遇到部署的问题可以在 “路由” 一章的 部署问题与服务端配置 小节查看如何处理。

? Use history mode for router?
  (Requires proper server setup for index fallback in production)
  (Y/n) y

选择一个 CSS 预处理器,可以根据自己的喜好选择,不过鉴于目前开源社区组件常用的都是 Less ,所以也建议选择 Less 作为入门的预处理器工具。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
 by default):
  Sass/SCSS (with dart-sass)
> Less
  Stylus

Lint 规则,用来代码检查,写 TypeScript 离不开 Lint ,可以根据自己喜好选择,也可以先选择默认,后面在 添加协作规范 一节也有说明如何配置规则,这里先默认第一个:

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Lint 的校验时机,一个是在保存时校验,一个是在提交 commit 的时候才校验,这里也选默认:

? Pick additional lint features: (Press <space> to select,
 <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save
 ( ) Lint and fix on commit

项目配置文件,笔者更习惯保存为独立文件:

? Where do you prefer placing config for Babel, ESLint, etc.?
  (Use arrow keys)
> In dedicated config files
  In package.json

是否保存为未来的项目配置,存起来方便以后快速创建:

? Save this as a preset for future projects? Yes
? Save preset as: vue-3-ts-config

至此,项目创建完成!可以通过 npm run serve 开启热更进行开发调试,通过 npm run build 构建打包上线。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值