一、什么 是脚手架工具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. WIN7 64位升级更新到IE10或IE11后,IE不能打开

    权限问题,已经解决 解决办法: 用regedit打开注册表,找到 HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main 对左侧树Mai ...

  2. 源代码管理工具GIT

    01.GIT简介 svn是集中式的源代码管理工具,必须联网才能操作 git是分布式的. 有两中:一个是本地代码仓库,一个是远程代码仓库 分布式源代码管理工具 02.GIT - 本地代码仓库使用流程 1 ...

  3. bzoj1756

    1756: Vijos1083 小白逛公园 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1150  Solved: 371[Submit][Statu ...

  4. (转)Sql Server 保留几位小数的两种做法

    原文地址:http://blog.csdn.net/skyandcode/article/details/23523815 问题: 数据库里的 float momey 类型,都会精确到多位小数.但有时 ...

  5. 8 个很有用的 jQuery 技巧(转)

    http://www.oschina.net/question/12_145472 一个基于web的标签设计,打印工具,超diao http://www.oschina.net/question/17 ...

  6. 各个nginx conf的虚拟主机的配置

    server { listen 80; server_name t-cl.orangevip.com; rewrite ^(.*)$ https://$host$1 permanent;} serve ...

  7. time模块,datetime模块

    time模块 time模块是包含各方面对时间操作的函数. 尽管这些常常有效但不是所有方法在任意平台中有效. 时间相关的操作,时间有三种表示方式: 时间戳               1970年1月1日 ...

  8. 表达式语言EL简单学习

    Jsp2.0最重要的特性就是表达式语言EL.jsp用户可以用它来访问应用程序数据. EL表达式以${开头并以}结束. ${expresion}     ${x+y} 它也常用来连接两个表达式,取值将从 ...

  9. xUtils 简介

    ## xUtils简介* xUtils 包含了很多实用的android工具.* xUtils 最初源于Afinal框架,进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持(1 ...

  10. JDK集合框架--综述

       接下来的几篇博客总结一下对jdk中常用集合类知识,本篇博客先整体性地介绍一下集合及其主要的api: 从整体上来说,集合分两大类collection和map: 首先来看看Collection: c ...