一,介绍

Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。
在这里插入图片描述

二,vite创建项目介绍

在这里插入图片描述

通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目。
使用 npm:

$ npm init @vitejs/app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

或者 yarn:

$ yarn create @vitejs/app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

可能会出现这样的情况,当你的用户名中有一个空格,比如“Mike Baker”时,Vite 就不能成功创建。这时可以尝试:

$ create-vite-app <project-name>

三,vue-cli创建项目介绍

Vue-cli :Vue.js 开发的标准工具 , 新版的 vue-cli 还提供了图形界面,如果你对命令行陌生,也可以使用图形界面。

(1)安装

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

建议使用npm进行安装,而且要做全局安装。因为我在使用yarn进行安装后,也可以安装成功,但是安装完成不能使用vue命令。

安装时间两分钟左右,安装完成会有success的提示。

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确:

vue --version

这时候可以展示出类似这样的版本信息@vue/cli 4.5.6。如果你的版本低于这个,可以再使用npm install -g @vue/cli来进行安装。

升级

如需升级全局的 Vue CLI 包,请运行:

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

(2)创建项目

这里我先用命令行的方式创建一个Vue3项目,直接在命令行中输入

vue create vue3-1

输入完成后,他会有这样一句询问。
运行以下命令来创建一个新项目:

Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

意思是你不能科学上网,建议你使用淘宝源,这时候你需要选择Y,也就是使用淘宝源进行创建。如果你已经配置淘宝源不会显示这个选项。

当你选择Y之后,就会跳出三个菜单让你选择。

? Please pick a preset: (Use arrow keys)            //请选择预选项
> Default ([Vue 2] babel, eslint)                   //使用Vue2默认模板进行创建
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)   //使用Vue3默认模板进行创建
  Manually select features                          //手动选择(自定义)的意思

因为你要使用TypeScript进行开发 Vue3 的代码,所以不能直接使用第二项默认模板,这时候我们选择第三项手动选择。选择的时候按回车就可以实现。(如果这时候你没有上面的三个选项,说明的 vue-cli 是旧版本,需要你更新。)

这时候就会出现很多可插拔的选项让你自定义选择:

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router                          //路由
 ( ) Vuex                            //状态管理工具
 ( ) CSS Pre-processors             //CSS预处理器
 (*) Linter / Formatter             //格式化工具
 ( ) Unit Testing                   //单元测试
 ( ) E2E Testing                    //E2E测试

这里空格选择需要添加的包
回车下一步

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

这里要选择 3.x 的版本,点击回车,然后会提示你是否需要使用class-style,教学中旧不使用这个类样式语法了,所以我们选择n

 Use class-style component syntax?

然后会出现下面的选项 ,意思是否使用TypeScript和Babel的形式编译 JSX.这里我们也选择n

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

然后会出现ESLint的一些配置,这里我们选择第一项,默认就好

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

回车后会让你选择增加lint的特性功能。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save         //保存的时候进行Lint
 ( ) Lint and fix on commit   //需要帮你进行fix(修理),这项我们不进行选择

回车后让你选择这些配置文件时单独存放,还是直接存放在package.json文件里。这里选择放在单独的文件里。

Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

最后一个问题,是问你需不需要把这些配置保存下来,下次好直接进行使用。我这里选择不用(n)。淡然你可以自行选择

Save this as a preset for future projects? (y/N)

如果你同时安装了npm和yarn来个包管理软件,它还会作最后一次询问,让你选择使用什么进行下载。

? Pick the package manager to use when installing dependencies:
> Use Yarn
  Use NPM

出现下面的信息,说明我们已经安装完成了。

Done in 10.33s.
 $ cd vue3-1
 $ yarn serve

根据提示在命令行输入cd vue3-1进入项目,然后再输入yarn serve开启项目预览。这时候就会给出两个地址,都可以访问到现在的项目.

 App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.118:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
Logo

前往低代码交流专区

更多推荐