vue 重学笔记二：安装 & 创建
本文只介绍 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--template vue // 如： npm init vite@latest vue3-study --template vue # npm 7+，需要加上额外的双短横线 $ npm init vite@latest -- --template vue $ cd $ 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]
现在来走一遍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 出的一种视图化创建项目的方式。