相信很多接触过vue的小伙伴非常熟悉了,我们在开启项目之前都需要vue init webpack xx来初始化自己的项目目录。但是在实际开发中我们往往会根据公司要求或者业务的需要会对目录进行局部的调整,那么今天我们来说一说如何能够创建自己的项目目录机构,要做这个也是非常的容易了

首先,我们需要全局安装 vue-cli

npm install vue-cli -g

  其次我们需要在自己的git仓库中上传想要应用的项目目录结构。这里的目录结构我主要是参考vue官方的模板。在github上找到vue官方的webpack模板。项目的目录结构如下

上传到自己的git仓库之后,我们就可以放心的来vue init自己想要的项目结构了

vue init username/repo my-project

  username为自己的git用户名,repo是仓库名

 cd my-project
$ npm install
$ npm run dev

  剩下来就是我们熟悉的节奏了,不足之处还请多多指教~

如何快速的vue init 属于自己的vue模板?的更多相关文章

  1. vue init深度定制团队自己的Vue template

    大家都知道,使用vue-cli可以快速的初始化一个基于Vue.js的项目,全局安装脚手架之后,你可以通过vue list命令看到官方提供的5个模板 vue list 当开发一个独立项目的时候,使用官方 ...

  2. 解决vue-cli不能初始化webpack模板的问题(vue init卡住了,解决办法)

    报这个错误 有人说是代理问题.我也不懂,但这个方法有用 1.去github上下载要初始化的模板 https://github.com/vuejs-templates/webpack 或者直接用git去 ...

  3. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  4. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  5. 快速构建一个简单的单页vue应用

    技术栈 vue-cli webpack vux,vux-loader less,less-loader vue-jsonp vue-scroller ES6 vue-cli:一个vue脚手架工具,利用 ...

  6. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  7. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  8. vue init webpack-simple

    vue init webpack-simple  .. 将我们的项目更加方便,更有助于开发者快速开发. vue init webpack-simple的项目默认打包后之后一个html和一个js文件,而 ...

  9. vue init定制团队模板使用方法

    每次做项目都要自己搭建项目目录,或者换了公司就的重新搭建项目目录,是不是很麻烦呢?有没有想过一次性把项目目录搭建好,以后直接用呢?你首先想到的可能是复制自己原来的项目,然后删除.修改等等.然而有个更方 ...

随机推荐

  1. Linux地址ping不通情况怎么办?

    查看原文:http://www.ibloger.net/article/325.html Linux地址ping不通情况怎么办? 问题:今天写了一个微信支付的项目.有一个class中使用了httpPo ...

  2. 【bzoj1042】[HAOI2008]硬币购物

    首先使用DP预处理,先求出,在不考虑每种硬币个数的限制的情况下,每个钱数有多少种拼凑方案. 为了避免重复的方案被转移,所以我们以硬币种类为第一层循环,这样阶段性的增加硬币. 一定要注意这个第一层循环要 ...

  3. 关于clojurescript+phantomjs+react的一些探索

    这两天需要使用phantomjs+react生成些图片 React->Clojurescript: 最开始发现clojurescript中包裹react的还挺多: https://github. ...

  4. 编译android framework的例子【转】

    本文转载自:http://blog.csdn.net/brucexu1978/article/details/7610358 在开发过程中,尤其是Framework相关开发时,有时候需要重新编译资源文 ...

  5. Interfaces (C# Programming Guide)

    https://msdn.microsoft.com/en-us/library/ms173156.aspx An interface contains definitions for a group ...

  6. URAL 1003,1004

    1003: 并查集在处理矛盾关系的应用,讲的比较好的题解 #include <map> #include <set> #include <list> #includ ...

  7. RDA PQ工具使用 (屏参调整)

    使用客户规格书,制作屏参文件. 注意:,必填区和计算区,必填区根据屏参的SPEC填写,具体的屏参文件参数通过点击“Calc Sync”生成. 如:HV320WHB-N81的SPEC: 打开“Color ...

  8. Java中的经典算法之冒泡排序

    原理:比较两个相邻的元素,将值大的元素交换至右端. 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后.然后比较第2个数和第3个数,将 ...

  9. 短链接及关键字过滤ac自动机设计思路

    =============:短链接设计思路:核心:将长字符转为短字符串并建立映射关系,存储redis中.1.使用crc32转换为Long 2.hashids将long encode为最短字符串.作为短 ...

  10. python使用ddt模块对用例执行操作

    import time import unittest import ddt from selenium import webdriver TEST_URL = "http://www.ba ...