vue-cli3快速开始

node

安装,略。

webpack

  • 安装webpack

    • npm install webpack webpack-cli -g
  • 查看版本
    • webpack -v

vue-cli

  • 安装vue-cli

    • npm install vue-cli -g
  • 查看vue-cli版本
    • vue -V
  • vue-cli2.x升级vue-cli3
    • 卸载:npm uninstall vue-cli -g
    • 安装:npm install -g @vue/cli

创建

  • 初始化项目

    • vue create xxx
    • 使用默认选项(或按需选择)

运行

  • cd xxx
  • yarn serve

CLI简介

包括三部分:

  • CLI
  • CLI服务
  • CLI插件

目前最新版本3.4

  • https://github.com/vuejs/vue-cli

CLI

  • 三个主要命令

    • vue create
    • vue serve
    • vue ui

服务

  • 命令:vue-cli-service
  • https://cli.vuejs.org/zh/guide/cli-service.html#使用命令

选项

vue create里选项,官方叫CLI插件。

https://cli.vuejs.org/zh/guide/#cli-插件

安装详解

安装前准备

安装命令

查看版本

这里除了npm,还出现了yarn。yarn是什么?

官网

  • vue-cli3.x

  • vue-cli2.x
    • https://github.com/vuejs/vue-cli/tree/v2#vue-cli--
  • vue-cli3源码包含的东西
    • https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue

其他

升级Vue-CLI3

  • https://juejin.im/post/5c4a83e36fb9a049b13e91ba

一个模板

  • https://github.com/wangyupo/vue-vuex-router/tree/master/src

Vue-CLI3详解的更多相关文章

  1. 六. Vue CLI详解

    1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...

  2. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  3. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  4. Vue.prototype详解

    参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...

  5. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  6. vue实例详解

    Vue实例的构造函数 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的 虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 ...

  7. Vue入门系列(五)Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  8. Vue实例详解与生命周期

    http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...

  9. vue指令详解

    一.vue简绍 1. Vue.js是什么    Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...

  10. vue v-for详解

    1.Vue动态渲染列表------v-for用法详解: Html: <figure v-for="list in lists">     <div>     ...

随机推荐

  1. INAPP

    1. Login API : 接口為您提供了我們的登入服務,可以讓使用者透過facebook帳號登入我們的服務,在您呼叫此API後,可以得到 使用者的UUID(Unique UID為使用者在平台的唯一 ...

  2. CloudStack系统虚拟机启动但不在Host表中

    有网友问到这个问题,CloudStack中,系统虚拟机正常启动,Running状态. 可是在host表中没有对应项,上传下载模板等功能也不正常. 原因:系统虚拟机启动之后,会通过管理网段主动连接man ...

  3. FastDFS的配置、部署与API使用解读(3)以流的方式上传文件的客户端代码(转)

    调用的API为: String[] upload_file( String group_name,//组名,不指定则可设为null long file_size,//文件大小,必须制定 UploadC ...

  4. hiberinate二级缓存

    hibernate.cfg.xml配置 <!-- 二级缓存类型 --> <property name="hibernate.cache.region.factory_cla ...

  5. System V IPC相关函数

    System V IPC 将一个已保存的路径名和一个整数标识符转换成一个key_t值,称为IPC键key_t:System V IPC(System V消息队列.System V信号量.System ...

  6. IE兼容模式

    何为兼容模式 这个和IE的发展历程相关,在IE8之前Browser基本上属于IE一家独大,然后ie就有很多与web standard不一致的地方,比如只有自己才看得懂的tag等.后来由于chrome, ...

  7. SpringBoot配置文件详解

    自定义属性与加载 com.dongk.selfproperty.title=wangdkcom.dongk.selfproperty.name=10000 然后通过@Value("${属性名 ...

  8. bzoj3137: [Baltic2013]tracks

    炸一看好像很神仙的样子,其实就是个sb题 万年不见的1A 但是我们可以反过来想,先选一个起点到终点的联通块,然后这联通块后面相当于就能够走了,继续找联通块 然后就能发现直接相邻的脚步相同的边权为0,否 ...

  9. POJ1426 Find The Multiple —— BFS

    题目链接:http://poj.org/problem?id=1426 Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Tota ...

  10. vue中使用axios post上传头像/图片并实时显示到页面

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码:   <div id="myPhoto ...