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) 在单个模版里面同时支持太多选项会导致模 ...
随机推荐
- 利用HTML5开发Android(5)---HTML5地理位置服务在Android中的应用
Android中 Java代码 //启用地理定位 webSettings.setGeolocationEnabled(true); //设置定位的数据库路径 webSettings.setGeoloc ...
- JavaScript 跨域:谈谈跨域之 JSONP
在 Web 开发中,后台开发人员应该会通常遇到这个问题:跨域,而使用 JSONP 就是其中解决办法之一,当然,还有其它解决方法,比如:window.name.window.postMessage.CO ...
- 全代码实现ios-4
刚开始开发的时候,也曾经想用IB或Storyboard. 不过看了许多篇关于IB和Storyboard的操作文档后仍然是糊里糊涂,不由得怀疑自己的IQ. 可不可以全代码实现ios开发?当时我想. 不过 ...
- 15 Examples To Master Linux Command Line History
When you are using Linux command line frequently, using the history effectively can be a major produ ...
- Vehicle’s communication protocol
http://www.crecorder.com/techInfo/commuProtocols.jsp COMMUNICATION PROTOCOLS A “communication protoc ...
- How do I place a group of functions or variables in a specific section?
http://supp.iar.com/Support/?Note=27498 EWARM v5.xx (and newer) The placement of a few functions in ...
- PL/pgSQL学习笔记之十一
http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 39.3.4. Row 类型 name table_name%R ...
- 学习马士兵的struts2/hibernate/spring中遇到的问题及其解决方法
STRUTS2 1. 写好最简单的hello world项目后,无法通过浏览器访问到hello.jsp页面,提示没有资源. 学习structs2的时间,已经更新到了2.3.16了,structs中的很 ...
- Codeforces Gym 100015B Ball Painting 找规律
Ball Painting 题目连接: http://codeforces.com/gym/100015/attachments Description There are 2N white ball ...
- Android中显示网页的多种方式
在android中显示页面主要有两种方式,一种是在Activity里面直接显示网页,另一种是调用浏览器显示网页.方式不同,使用的方法也不同,下面我们分别讲解. 一.在Activity里面直接显示网页 ...