使用 Vue 脚手架搭建项目

• 2019 年 11 月 7 日
• 筆記

vue-cli 也是一个 npm 包，可以帮助我们快速搭建起 vue 项目的脚手架。

环境说明

win10 / [email protected] / vue-cli @3.2.1

安装

首先全局安装 vue-cli 3.x （这里以 3.2.1 版本为准）：

npm install  @vue/[email protected] -g

为了对比 3.x 和 2.x 在项目创建上的区别，执行下面命令：

npm install @vue/[email protected] -g

这样，我们可以通过 vue init 搭建 2.x 的项目结构，通过 vue create 搭建 3.x 的项目结构。

创建新项目

1) 2.x 版本

创建以 vuecli2test 命名的项目文件夹（注意不要用大写字母）：

vue init webpack vuecli2test

进行项目配置：

这里的 author 会自动读取以前全局配置的 gitconfig 文件的信息。

现在的项目文件夹结构是这样的：

跑一下项目看看：

npm run dev

2) 3.x 版本

创建以 vuecli3test 命名的项目文件夹：

vue create vuecli3test

进行项目配置：

现在的项目文件夹结构是这样的：

和 vue-cli 2 进行对比：

可以发现，相比 2.x 版本，3.x 精简了不少。首先是将 static 文件夹换成 public，原来根目录下的 index.html 也存放到了 public 里面，并且还移除了之前用来配置 webpack 的 build 和 config 文件夹（实际上在 no_modules 文件夹里）。

跑一下项目看看：

npm run serve

vue-cli 3.x 为我们提供了可视化配置的方式，可以通过下面的方式启动配置服务器：

vue ui

之后导入项目文件夹，即可进入该项目对应的配置界面

另外，我们也可以在项目根目录下创建一个 vue.config.js 文件，自定义配置，这个文件之后会和 node_modules 中的配置文件进行合并。（就像是 sublime text 里面 settings-default 和 settings-user 的关系）

runtime+compiler 版本和 runtime-only 版本

创建项目的时候会让我们选择 runtime+compiler 版本或者 runtime-only 版本，那么这两个有什么区别呢？

• runtime+compile （运行时编译）版本允许我们正常使用 template，但是相对的，需要经历 template —> ast —> render function —> vdom —> dom 等一系列过程才能将模板最终转化为真实 dom；
• runtime-only 版本（运行时）只允许在 .vue 文件中使用 template，其它地方要使用 render 函数，但是相对的，只需要经历 render function —> vdom —> dom 就能将模板最终转化为真实 dom。另外，引入组件的时候，.vue 中的 template 其实已经借助 vue-compile-template 编译成 render 函数了。

在 runtime+compile 版本中，new Vue 是这样的：

new Vue({      el:'#app',      template:<App/>      components:{ App }  })

在 runtime-only 版本中，new Vue 则是这样的：

new Vue({      el:'#app',      render:h => h(App)  })

render 函数接受 h 参数 ，这个 h 实际上就是 createElement 函数了， 它在这里接受一个组件对象 App 。

实际开发中用的更多的是 runtime-only 版本。