一、什么 是脚手架工具vue-cli?

类似于工人手里面的脚手架一样,帮助工人搭架子用,同样的vue脚手架工具也是帮助我们更好更快速的开发代码的工具

二、vue-cli能做什么?

三、vue-cli安装

前提条件: Node.js (>=4.x, 6.x preferred), npm version 3(必须安装Node.js)

npm install -g vue-cli

(1)用法:

$ vue init <template-name> <project-name>

template-name是引用的模板名称,project-name自己的项目名称

(2)eg(exempli gratia例如):

vue init webpack my-projec

注意:webpack引用的模板名称, my-project项目名称
    所有官方项目模板都是在vuejs-templates组织中的仓库。 将新模板添加到组织后,就可以运行vue init <template-name> <project-name>来使用该模板。 可以运行vue list查看所有可用的官方模板。
(3)目前可用的模板:

webpack - 一个功能齐全的Webpack + vue-loader安装程序,带有热重载,linting,测试和css抽取。
webpack-simple - 简单的Webpack + vue-loader设置,用于快速原型设计。
browserify - 一个全功能的Browserify + vueify设置与热重载,linting和单元测试。
browserify-simple - 用于快速原型设计的简单的Browserify + vueify设置。
pwa - 基于webpack模板的vue-cli的PWA模板

(4)脚手架关键词解析

软件开发的脚手架的概念是从建筑学术语上引申而来。在建筑学上,脚手架指施工现场为工人操作并解决垂直和水平运输而搭设的各种支架。你见过大楼施工吧?在大楼外墙围的那圈支架就是其中一种脚手架。
    在软件开发上(当然也包括前端开发)的脚手架指的就是:有人帮你把这个开发过程中要用到的工具、环境都配置好了,你就可以方便地直接开始做开发,专注你的业务,而不用再花时间去配置这个开发环境,这个开发环境就是脚手架。
    比如vue.js就有个vue-cli脚手架,基于node.js的开发环境,作者帮你把开发环境大部分东西都配置好了,你把脚手架下载下来就可以直接开发了,不用再考虑搭建这些工具环境。

.

vue脚手架工具vue-cli的更多相关文章

  1. 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  2. 使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  3. 三、vue脚手架工具vue-cli的使用

    1.vue-cli构建 vue-cli工具构建:https://blog.csdn.net/u013182762/article/details/53021374 npm的镜像替换成淘宝 2.项目运行 ...

  4. Vue脚手架工具vue-cli和调试组件vue-devtools

    https://github.com/vuejs/vue-cli npm install vue-cli -g vue init webpack my-project cd my-project // ...

  5. vue脚手架工具

    1.安装node.js 2.安装vue-cli npm install vue-cli -g vue -V(-V大写)查看版本信息 3.安装webpack 4.初始化项目 vue init webpa ...

  6. 安装vue脚手架和vue安装element-ui

    首先下载安装node.js,因为vue依赖node.js,然后用npm安装vue,步骤如下: 安装成功后安装element-UI,步骤如下: 完成后用npm run dev 运行项目.

  7. 【vue系列之一】使用vue-cli脚手架工具搭建vue-webpack项目

    最近更新了webpack配置详解,可移步vue-cli webpack详解 对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地 ...

  8. 搭建vue脚手架---vue-cli

    vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建.打包.维护管理等都非常方便快捷.我们在开发项目时尤其需要这样一个快速构建项目的工具. 以下 ...

  9. vue脚手架一

    一准备: 在F:/xampp/htdocs/文件夹下检查: 1,node -v; 2,npm -v; 3,淘宝镜像(选装): npm install -g cnpm --registry= https ...

随机推荐

  1. NSArray, NSSet, NSDictionary

    一.Foundation framework中用于收集cocoa对象(NSObject对象)的三种集合分别是: NSArray 用于对象有序集合(数组)NSSet 用于对象无序集合(集合) NSDic ...

  2. BZOJ3282:Tree(TCL基础题)

    给定N个点以及每个点的权值,要你处理接下来的M个操作. 操作有4种.操作从0到3编号.点从1到N编号. 0:后接两个整数(x,y),代表询问从x到y的路径上的点的权值的xor和. 保证x到y是联通的. ...

  3. [SCOI 2007] 修车

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1070 [算法] 首先 , 我们发现 , 在倒数第i个修车会对答案产生i * k的贡献 ...

  4. hdu1584(状态压缩DP)

    蜘蛛牌 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. Bootstrap标签页

    用法 您可以通过以下两种方式启用标签页: 通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文 ...

  6. mongoDB学习资料整理

    mongoDB入门篇 http://www.imooc.com/view/246

  7. bzoj 4071: [Apio2015]巴邻旁之桥【splay】

    用权值线段树会容易一些并快一些,但是想复健一下splay所以打了splay 然后果然不会打了. 解题思路: 首先把家和办公室在同一侧的提出来直接加进答案里: 对于k=1,直接选所有办公室和家的中位数即 ...

  8. P5071 [Ynoi2015]此时此刻的光辉

    传送门 lxl大毒瘤 首先一个数的因子个数就是这个数的每个质因子的次数+1的积,然后考虑把每个数分解质因子,用莫队维护,然后我交上去就0分了 如果是上面那样的话,我们每一次移动指针的时间复杂度是O(这 ...

  9. border-radius的参数

    border-radius的参数: 据w3c上的官方解释,是这样子的: border-radius: 1-4 length|% / 1-4 length|%;1-4指的是radius的四个值,leng ...

  10. IE6,7bug大搜集

    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决 ,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1 ...