Vue-CLI3详解
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是什么?
- https://github.com/yarnpkg
- https://github.com/yarnpkg/yarn
- https://yarnpkg.com/zh-Hant/
- https://yarn.bootcss.com/
- npm yarn对比-jianshu
官网
- 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详解的更多相关文章
- 六. Vue CLI详解
1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- Vue.prototype详解
参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- vue实例详解
Vue实例的构造函数 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的 虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 ...
- Vue入门系列(五)Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue实例详解与生命周期
http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...
- vue指令详解
一.vue简绍 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...
- vue v-for详解
1.Vue动态渲染列表------v-for用法详解: Html: <figure v-for="list in lists"> <div> ...
随机推荐
- HDU 3305 Ice-sugar Gourd
Ice-sugar Gourd Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...
- Struts拦截器(转)
xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC &qu ...
- 一套扁平化界面风格的flex 皮肤
意外在git上发现这个项目.似乎刚開始不久.部分控件的新皮肤似乎还没完毕.只是个人感觉挺不错的.大家认为呢? =>git地址:https://github.com/akamud/FlatSpar ...
- snip_进制转换代码段
10进制转成16进制. /* 程序:10进制转16进制的C语言实现 描述: 关键: 获得余 获得整 整为零 则退出 */ #include<stdio.h> #define N 10 #d ...
- MySQL中给自定义的字段查询结果添加排名的方法
我正在用 MySQL 客户端的时候,突然想到如果可以给查询结果添加排名该多好啊,然后就找到了一个简单的解决办法. 下面是一个示例表的数据: 然后我们要根据 Roll_No 字段进行排序并给出排名,我 ...
- redis11----监控工具 sentinel
当master宕机了要把slave1变为master,并把slave2指向slave1. 可以运行时更改master-slave,config set/get,修改一台slave(设为A)为new m ...
- ros使用时的注意事项&技巧2
1.查看参数列表 rosparam list 2.查询参数rosparam get parameter_name,如rosparam get /rosdistro 3.设置参数rosparam set ...
- 汉字与区位码互转(天天使用Delphi的String存储的是内码,Windows记事本存储的文件也是内码),几个常见汉字的各种编码,utf8与unicode的编码在线查询,附有读书笔记 good
汉=BABA(内码)=-A0A0=2626(区位码)字=D7D6(内码)=-A0A0=5554(区位码) 各种编码查询表:http://bm.kdd.cc/ 汉(记住它,以后碰到内存里的数值,就会有敏 ...
- vue 使用html2canvas将DOM转化为图片
一.前言 我发现将DOM转化为图片是一个非常常见的需求,而自己手动转是非常麻烦的,于是找到了html2canvas这个插件,既是用得比较多的也是维护得比较好的一个插件. 注意:版本比较多,这里介绍最新 ...
- react项目中的注意点
一.ES6 的编译方法 目前主流的浏览器还不支持ES6. 现在一般采用webpack 和 <script type="text/babel">对jsx 语法进行编译, ...