格式:vue init <templateName> <ProjectName>

例子:vue init webpack vue02

运行上面的命令后,脚手架帮忙按照webpack模板生成出以上目录

接着运行npm install 安装依赖,

脚手架自动去读取package.json

自动从网上下载依赖的模块,并且生成一个

node_modules目录

开始运行npm run dev,它会自动执行

[build/dev-server.js]

  1. webpack对源码进行编译打包,并且返回compiler对象
  2. 创建express服务器(类似于tomcat),提供静态文件的web服务,启动端口默认是8080

当我们写完程序,代码放到src目录下

当断开express服务器,发现无法访问已经已经编译后的compiler对象,我们希望的是能够帮从新编译出一个静态文件。所以运行另外一条命令

npm run build 执行的build/build.js文件

  1. 自动删除目录
  2. 执行webpack构建编译文件,然后保存dist目录
  3. 输出相关的信息

引入bootstrap

1、      先安装npm install jquery --save-dev

在modules目录下,自动生成了jquery目录

编辑package.json发现自动增加jquery的依赖(不需要人手操作)

手动编辑webpack.base.conf.js

在module.exports里面加入:

plugins: [

new webpack.ProvidePlugin({

$:"jquery",

jQuery:"jquery",

"windows.jQuery":"jquery"

})

]

到此webpack已经搞定了jquery的引用,下面就是自己src的使用

在App.vue 编写测试jquery代码,是成功。

到全局目录,复制bootstrap的这3个文件,

然后粘贴到src\assets 目录下

在main.js下,引用的文件,将是全局的

测试:

npm教程_脚手架原理以及bootstrap引入的更多相关文章

  1. npm教程、脚手架

    使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的 ...

  2. npm基本用法及原理(10000+)

       作为前端开发者,应该每个人都用过npm,那么npm到底是什么东西呢?npm run,npm install的时候发生了哪些事情呢?下面做详细说明. 1.npm是什么 npm是JavaScript ...

  3. Esfog_UnityShader教程_镜面反射SpecularReflection

    系列教程第四篇,本来打算昨天写的,有些小偷懒就今天写了,这一期我们来讨论一下关于镜面反射的基本原理和具体代码.这一篇是承接着上一篇<Esfog_UnityShader教程_漫反射DiffuseR ...

  4. Spring_MVC_教程_快速入门_深入分析

    Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

  5. Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04

    摘自: http://www.cnblogs.com/kinglau/p/3796164.html http://www.powerxing.com/install-hadoop/ 当开始着手实践 H ...

  6. Netty4.x中文教程系列(六) 从头开始Bootstrap

    Netty4.x中文教程系列(六) 从头开始Bootstrap 其实自从中文教程系列(五)一直不知道自己到底想些什么.加上忙着工作上出现了一些问题.本来想就这么放弃维护了.没想到有朋友和我说百度搜索推 ...

  7. 【转】Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04

    原文链接:http://dblab.xmu.edu.cn/blog/install-hadoop/ 当开始着手实践 Hadoop 时,安装 Hadoop 往往会成为新手的一道门槛.尽管安装其实很简单, ...

  8. ArcGIS for Desktop入门教程_第六章_用ArcMap制作地图 - ArcGIS知乎-新一代ArcGIS问答社区

    原文:ArcGIS for Desktop入门教程_第六章_用ArcMap制作地图 - ArcGIS知乎-新一代ArcGIS问答社区 1 用ArcMap制作地图 作为ArcGIS for Deskto ...

  9. 1、windows安装npm教程 --参考自https://www.cnblogs.com/jianguo221/p/11487532.html

    windows安装npm教程   1.在使用之前,先类掌握3个东西,明白它们是用来干什么的: npm:  nodejs 下的包管理器. webpack: 它主要用途是通过CommonJS 的语法把所有 ...

随机推荐

  1. Java-SpringMvc-@ResponseBody返回中文字符串乱码

    第一种.注解 @RequestMapping(value = "/test.do", method = {RequestMethod.GET},produces = "t ...

  2. PAT 1018 Public Bike Management[难]

    链接:https://www.nowcoder.com/questionTerminal/4b20ed271e864f06ab77a984e71c090f来源:牛客网PAT 1018  Public ...

  3. 深入理解python之二——python列表和元组

    从一开始学习python的时候,很多人就听到的是元组和列表差不多,区别就是元组不可以改变,列表可以改变. 从数据结构来说,这两者都应当属于数组,元组属于静态的数组,而列表属于动态数组.稍后再内存的分配 ...

  4. .net 调用API并解析Json数据方法

    using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using Syst ...

  5. Fiddler过滤指定域名

    Fiddler过滤指定域名的方法一 切换到fiddler右侧窗口的Filters选项卡,勾选顶部的“Use Filters”,找到Hosts区域,设置以下三个选项: 1.第一项有三个选项,不做更改: ...

  6. unity Texture贴图纹理及相关属性

    Texture资源是Unity3d游戏开发中用途最广泛的资源之一,被引用于诸如界面UI. Mesh模型 .粒子效果等.还有一些特殊的Texture资源,如:Movie Texture:视频资源.Ren ...

  7. 20155213 2016-2017-2 《Java程序设计》第九周学习总结

    20155213 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 第十六章 JDBC(Java DataBase Connectivity)即java数据库连 ...

  8. Openstack创建虚拟机 Restful api和RPC调用

    Horizon前台界面用于接受用户的输入或动作(action),然后将这些参数构造成RESTful API(https://developer.openstack.org/api-ref/comput ...

  9. java后台获取和js拼接展示信息

    java后台获取和js拼接展示信息: html页面代码: <div class="results-bd"> <table id="activityInf ...

  10. linux基础命令---df

    df 显示磁盘分区上的磁盘使用状况,可以显示出文件系统名称.大小.挂载点等信息.df显示包含每个文件名参数的文件系统上可用的磁盘空间.如果不给出文件名,则显示所有当前挂载的文件系统上可用的空间.默认情 ...