使用 Vue 脚手架搭建项目

PriceBerg 发布于15天前
0 条问题

使用 Vue 脚手架搭建项目

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

环境说明

win10 / node.js@10.15.0 / vue-cli @3.2.1

安装

首先全局安装 vue-cli 3.x (这里以 3.2.1 版本为准):

npm install  @vue/cli@3.2.1 -g

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

npm install @vue/cli-init@3.2.0 -g

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

创建新项目

1) 2.x 版本

创建以 vuecli2test 命名的项目文件夹(注意不要用大写字母):

vue init webpack vuecli2test

进行项目配置:

使用 Vue 脚手架搭建项目

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

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

使用 Vue 脚手架搭建项目

跑一下项目看看:

npm run dev

使用 Vue 脚手架搭建项目

2) 3.x 版本

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

vue create vuecli3test

进行项目配置:

使用 Vue 脚手架搭建项目

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

使用 Vue 脚手架搭建项目

和 vue-cli 2 进行对比:

使用 Vue 脚手架搭建项目

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

跑一下项目看看:

npm run serve

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

vue ui

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

使用 Vue 脚手架搭建项目

另外,我们也可以在项目根目录下创建一个 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 版本。

查看原文: 使用 Vue 脚手架搭建项目

  • orangewolf
  • whitelion
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。