相信很多接触过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. c#基于事件模型的UDP通讯框架(适用于网络包编解码)

    之前写过一篇关于c#udp分包发送的文章 这篇文章里面介绍的方法是一种实现,可是存在一个缺点就是一个对象序列化后会增大非常多.不利于在网络中的传输. 我们在网络中的传输是须要尽可能的减小传送的数据包的 ...

  2. __init__、__str__、__del__方法

    1.def__init__()方法: class Cat: """定义了一个Cat类""" #初始化对象 def __init__(self ...

  3. 逆向碰到3des分析

    1.ios 某个app碰到涉及3des的解密函数. 2.底层调用的库函数. 3.对比CCCrypt的头文件 CCCryptorStatus CCCrypt( CCOperation op, /* kC ...

  4. ios23--动画做弹出提示框toast

    ) { /* [UIView animateWithDuration:2.0 animations:^{ // 执行动画 self.showHUB.text = @"当前购物车已空,赶紧买买 ...

  5. Lein droid

    最近尝试使用Clojure,发现有个Lein droid的项目可以方便的在android下使用Clojure. http://clojure-android.info/#get-started 尝试了 ...

  6. 以太网接口TCP/IP协议介绍,说的很容易懂了

      以太网接口TCP/IP协议介绍,说的很容易懂了  TCP/IP协议,或称为TCP/IP协议栈,或互联网协议系列. TCP/IP协议栈(按TCP/IP参考模型划分) 应用层 FTP SMTP HTT ...

  7. CPU上电时序详细分析

    首先是RTC电源,这部分电力是永远不关闭的,除非电池(纽扣电池)没电并且没接任何外部电源(比如电池和电源适配器). RTC用以保持机器内部时钟的运转和保证CMOS配置信息在断电的情况下不丢失:其次,在 ...

  8. java 基础 —— 文件操作(File)

    1. 基本成员: File.separator public class File implements Serializable, Comparable<File> { private ...

  9. 0623-TP框架整理一(下载、入口文件、路由、创建控制器、调用模板、系统常量、命名空间)

    一.下载解压后用ThinkPHP(核心)文件 核心文件夹(ThinkPHP)不要改,是作用于全局的,有需要可以改应用目录(Application) 二.创建入口文件: 运行后出现欢迎界面,在说明系统自 ...

  10. [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照(5)移除 App 预览或屏幕快照

    您可以随时移除 App 预览,但仅可在 App 状态为可编辑时才能移除屏幕快照.要了解可编辑的状态,请前往 App 状态. 必要职能:“帐户持有人”职能.“管理”职能.“App 管理”职能或“营销”职 ...