本文只介绍 cli 脚手架安装流程。
准备工作
1. 安装 node
2. vscode
安装①
# 最新稳定版 $ npm install vue@next
注意:npm 要求版本是 3.0 +
暂时先不执行:【官网】:Vue 还提供了编写单文件组件的配套工具。如果想使用单文件组件,还需要安装 @vue/compiler-sfc
:
$ npm install -D @vue/compiler-sfc
这个单文件组件是什么,先不管它,先不运行这行命令,看看不使用的话,会如何。
CLI安装②
yarn global add @vue/cli # 或 npm install -g @vue/cli
注意:vue-cli 3.x 和 vue-cli 2.x 使用了相同的 vue 命令,如果之前已经安装了 vue-cli 2.x,它会被替换为 Vue-cli 3.x。
查看版本:
$ vue --version
@vue/cli 5.0.3
然后在 Vue 项目中运行:
vue upgrade --next
如下就可以开始使用了:
方法一:vite 快速构建项目
【官网】:Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。
# npm 6.x $ npm init vite@latest <project-name> --template vue // 如: npm init vite@latest vue3-study --template vue # npm 7+,需要加上额外的双短横线 $ npm init vite@latest <project-name> -- --template vue $ cd <project-name> $ npm install $ npm run dev
运行此命令后,会在文件夹中出现一个 vue3-study 的文件夹,这就是你创建的一个项目,然后就是直接跟 vue2 中一样,运行这个项目,就可以在浏览器中看到项目页面了。
目前先走这几步,看看情况如何,后续在完善以下几点:
1. 单文件组件是什么,一定要用么?
2. 服务端渲染如何做?
结果
此时,vscode 打开项目,会发现项目中比较干净,如下:
居然没有 vue-router ? vuex ? 官网给的这个步骤创建的完全是一个纯净版的 vue3.0 项目吧?啥都没有,vue-router,vuex 这些全都需要自己手动安装一遍。这不是我想要的,我想要一站式创建vue3.0 项目。接下来看看如何创建。
一站式创建 vue3.0 项目
接下来看下如何一站式创建:vite + vue3.0 + TS + vue-router + vuex + less
方法二
安装
执行上文的 ①,②步的安装,这里不再赘述;
创建项目
// ③
$ vue init webpack vue3-test
执行这行命令后,报以下信息:
提示需要安装一个全局的 vue-cli ?为什么?我安装的是一个 全局的 vue-cli 呀?不懂,算了,还是按照提示运行下命令:
$ cnpm i -g @vue/cli-init //npm 太慢了,用 cnpm
然后重新跑 ③ 命令,并选择需要安装的工具,命令如下:
$ vue init webpack vue3-test # 这里需要进行一些配置,默认回车即可 ? Project name (vue3-test) ? Project name vue3-test ? Project description (A Vue.js project) vue3 test ? Project description vue3 test ? Author bala ? Author bala ? Vue build standalone ? Install vue-router? (Y/n) Y ? Install vue-router? Yes ? Use ESLint to lint your code? (Y/n) Y ? Use ESLint to lint your code? Yes ? Pick an ESLint preset (Use arrow keys) ? Pick an ESLint preset Standard ? Set up unit tests (Y/n) Y ? Set up unit tests Yes ? Pick a test runner (Use arrow keys) ? Pick a test runner jest ? Setup e2e tests with Nightwatch? (Y/n) Y ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recom ? Should we run `npm install` for you after the project has been created? (recom mended) npm vue-cli · Generated "vue3-test". # Installing project dependencies ... # ======================== ...
等待项目创建完成……
运行项目
cd vue3-test
npm run dev
现在在编译器中打开项目结构看下,如下:
发现现在有了vite, vue, vue-router,但是还是缺少vuex,less 预处理语言,所以,我们再换种创建的方式。
方法三:vue create 命令
先来看下它的命令,具体的参数解说请看:菜鸟教程-vue3 创建项目
vue create [options] <app-name>
现在来走一遍vue create 的创建流程。
创建项目
vue create vue3-create-app
结果:
发现创建的还是一个纯净版的 vue 项目,还是不是我想要的,算了,再换种 。
方法四:vue ui
$ vue ui
运行上面的命令,会弹出一个可视化的创建项目的界面:
点击页面中的 create 创建一个项目,创建完成后,可以选择安装各种插件和依赖,看下安装的结果:
总结
通过 四种创建项目的方式,发现只有 vue ui (第四种方式)创建项目是最快捷的,而其中,第一、三种方式创建的项目都是纯净版的项目,第二种只增加了vue-router ,都需要再次手动去安装各种插件和依赖。(可能第一、二、三 种创建方式我在操作的时候还有哪里失误或者没看到的地方,有谁知道的可以在评论中留言。)
题外话
其实这四种方式并不是完全都是 vue3 新增的创建方式,要说新增的话,只有第一种方式 vite 创建是 vue3 新增的。其他三种都是 vue2.0 的时候就存在的创建方式,而其中 第二种,第三种都是 vue-cli2 创建项目的方式,第四种 vue ui 是 vue-cli3 出的一种视图化创建项目的方式。