专栏首页前端之旅使用 Vue 脚手架搭建项目

使用 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

进行项目配置:

这里的 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 的 buildconfig 文件夹(实际上在 no_modules 文件夹里)。

跑一下项目看看:

npm run serve

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

vue ui

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

另外,我们也可以在项目根目录下创建一个 vue.config.js 文件,自定义配置,这个文件之后会和 node_modules 中的配置文件进行合并。(就像是 sublime text 里面 settings-defaultsettings-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 版本。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 折腾博客系列之博客搭建:Hexo+Github pages

    初衷:之前我习惯用印象笔记进行知识的收集和整理,虽然很好用,但终归只适合输入而不适合输出。我需要的是一个更加开放的平台,在这上面可以输出: 1.学习的收获 ;2...

    Chor
  • hexo 中文文章渲染错误的bug解决

    这实际上是在很长一段时间内困扰我的一个 bug,在 hexo s 本地查看 markdown 文章后,会偶发性地出现部分文章渲染错误的情况,

    Chor
  • Vue 全家桶学习笔记:Vue-router

    在以前,前后端是不分离的,这个阶段通常是由服务端渲染好页面(SSR),再发送页面给前端去展示;接着到了前后端分离的阶段,前端向静态资源服务器拿资源,再通过 js...

    Chor
  • 学界 | 从可视化到新模型:纵览深度学习的视觉可解释性

    选自arXiv 作者:张拳石、朱松纯 机器之心编译 参与:乾树、李泽南 在本篇论文中,来自 UCLA 的研究人员就目前有关理解神经网络表征和用可解释/分离式表征...

    机器之心
  • 又动了谁的奶酪?川普这次要搞谷歌!

    如果说之前的互怼还停留在发推层面,这次,特朗普正把战争进一步提升到白宫的监管层面。

    大数据文摘
  • 深入理解-Spring-之源码剖析IOC(一)

    作为Java程序员,Spirng我们再熟悉不过,可以说比自己的女朋友还要亲密,每天都会和他在一起,然而我们真的了解spring吗?

    黄泽杰
  • 深入理解-Spring-之源码剖析IOC(一)

    作为Java程序员,Spirng我们再熟悉不过,可以说比自己的女朋友还要亲密,每天都会和他在一起,然而我们真的了解spring吗?

    用户5224393
  • PG学习初体验--源码安装和简单命令(r8笔记第97天)

    其实对于PG,自己总是听圈内人说和Oracle很相似,自己也有一些蠢蠢欲动学习的想法,从我的感觉来看,它是介于Oracle和MySQL之间的一种 数据库...

    jeanron100
  • Pytorch中的数据加载艺术

    数据库DataBase + 数据集DataSet + 采样器Sampler = 加载器Loader

    marsggbo
  • JVM性能调优-你不得不懂的G1收集器

    G1 中每个 Region 都有⼀个与之对应的 Remembered Set,当进⾏内存回收时,在 GC 根节点的枚举范围中加⼊ Remembered Set ...

    cwl_java

扫码关注云+社区

领取腾讯云代金券