vue-cli 发布(译)
如果你现在正在使用Vue.js,当你构建一个原型的时候,你所需要做的通常就是通过<script>
把Vue.js引入进来,然后就完事了。但是真实情况往往不是这样的。当我们真正开发一个应用的时候,我们不可避免的会用到一大堆的工具,模块化、预处理器、热模块加载、代码校验和测试。这些工具对于一个需要长期维护的大型应用是必须的,但是项目初始化将会是让人痛苦的事情。这就是为什么我们做了vue-cli,让一个简单的命令行工具来帮助你快速的构建一个拥有强大构建能力的Vue.js项目。
仅仅为了初始化
下面是使用方法:
# 安装vue-cli
npm install -g vue-cli # 使用vue-cli初始化项目
vue init webpack my-project # 进入到目录
cd my-project # 安装依赖
npm install # 开始运行
npm run dev
上面的这些命令会从 vuejs-templates 拉取模板并安装,然后用NPM安装依赖,最后你只需要用个NPM脚本启动就能开始开发了。
官方模板
这些官方的模板存在的意义在于提供强大的项目构建能力,以至于用户可以尽可能快速的进行开发。然而能否真正的发挥作用还在于你如何组织你的代码和你使用的其他库。
所有的官方模板都可以在 vuejs-templates organization 找到。如果有一个新的模板放在了这里,你可以直接就用 vue init <template-name> <project-name>
使用。你也可以运行 vue list
命令来看看现在有哪些官方模板是现在可用的。
目前有以下模板可供选择:
browserify - 拥有高级功能的 Browserify + vueify 用于正式开发。
browserify-simple - 拥有基础功能的 Browserify + vueify 用于快速原型开发。
webpack - 拥有高级功能的 Webpack + vue-loader 用于正式开发。
webpack-simple - 拥有基础功能的 Webpack + vue-loader 用于快速原型开发。
创建属于你的模板
如果你对官方的模板不感兴趣,你可以自己fork下来然后进行修改(或者重新写一个),然后用 vue-cli
来调用。因为 vue-cli
可以直接拉取 git源
:
vue init username/repo my-project
无处不在的Vue组件
每一个模板都有自己的作用:基础版本用于快速构建原型,高级版本用于正式开发。这些模板有许多共同的功能,如都支持 *.vue
组件。这意味着任何第三方的Vue组件都可以随意使用,并且可以轻而易举的发布在NPM上 - 让我们创建出更多的可重用组件!
原文:http://segmentfault.com/a/1190000004219090
vue-cli 发布(译)的更多相关文章
- 用@vue/cli发布npm包
1.环境准备 安装node,npm,@vue/cli 2.初始化项目 用@vue/cli创建新项目 vue create mtest-ui 删除public,main.js,App.vue等无关文件, ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- Vue CLI 介绍安装
https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...
- Vue CLI 3使用:浏览器兼容性
package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围.这个值会被 @babel/preset-env ...
- [WIP]Vue CLI
更新: 2019/05/30 文档: https://cli.vuejs.org/zh/ 安装 npm install -g @vue/cli 确认是否成功安装 vue --version 基础 ...
- vue cli的安装与使用
一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
随机推荐
- Linux下安装Android Studio (Centos 7)
首先去下载一个android studio的包. http://www.android-studio.org/ (友情一个) http://www.cnblogs.com/gssl/p/4963668 ...
- android 自定义控件(初篇)
android 自定义控件 在写UI当中很多时候会用到自定义的控件,其实自定义控件就像是定义一个类进行调用就OK了.有些相关的感念可以查看API 下面就用个简单的例子来说明自定义控件: public ...
- Servlet容器的启动过程
[http://book.51cto.com/art/201408/448854.htm] Tomcat的启动逻辑是基于观察者模式设计的,所有的容器都会继承Lifecycle接口,它管理着容器的整 ...
- 关于使用Transaction对于非数据库事务的操作
在操作数据库的过程中,为了数据的一致性,我们可以使用Transaction,要么成功的时候全部提交,要么有任何一个操作失败立即全部回滚.不仅仅是在数据库方面,有时候操作其他的内容,比如说对于系统文件的 ...
- 常见的Unix指令
ls -1 列出当前目录下的所有内容(文件/文件夹) pwd 显示当前操作的目录 cd 改变当前操作的目录 who 显示当前用户 clear 清屏 mkdir 新建一个目录 touch 新建一个文 ...
- (4)html表格
本节解说 :html的表格 表格: *<table></table> 标签定义 HTML 表格. *简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 t ...
- LVM管理及扩容(转)
LVM磁盘管理 一、LVM简介... 1 二、 LVM基本术语... 2 三、 安装LVM... 3 四、 创建和管理LVM... 4 2、 创建PV.. 6 3、 创建VG.. 7 4、 创建LV. ...
- C#连接SQLite数据库方法
--结合Enterprise Library连接,操作SQLite 企业库是我们常用的框架之一,可以从http://entlib.codeplex.com/下载Enterprise Library 5 ...
- Codeforces Round #310 (Div. 2) A. Case of the Zeros and Ones 水题
A. Case of the Zeros and Ones Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/con ...
- C++ Code_HotKey
Code::使用HotKeyCtrl定义一个系统热键 // 关联HotKeyCtrl控件变量 m_HotKey1 BEGIN_MESSAGE_MAP(CXyzDlg, CD ...