npm教程_脚手架原理以及bootstrap引入
格式:vue init <templateName> <ProjectName>
例子:vue init webpack vue02
运行上面的命令后,脚手架帮忙按照webpack模板生成出以上目录
接着运行npm install 安装依赖,
脚手架自动去读取package.json
自动从网上下载依赖的模块,并且生成一个
node_modules目录
开始运行npm run dev,它会自动执行
[build/dev-server.js]
- webpack对源码进行编译打包,并且返回compiler对象
- 创建express服务器(类似于tomcat),提供静态文件的web服务,启动端口默认是8080
当我们写完程序,代码放到src目录下
当断开express服务器,发现无法访问已经已经编译后的compiler对象,我们希望的是能够帮从新编译出一个静态文件。所以运行另外一条命令
npm run build 执行的build/build.js文件
- 自动删除目录
- 执行webpack构建编译文件,然后保存dist目录
- 输出相关的信息
引入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引入的更多相关文章
- npm教程、脚手架
使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的 ...
- npm基本用法及原理(10000+)
作为前端开发者,应该每个人都用过npm,那么npm到底是什么东西呢?npm run,npm install的时候发生了哪些事情呢?下面做详细说明. 1.npm是什么 npm是JavaScript ...
- Esfog_UnityShader教程_镜面反射SpecularReflection
系列教程第四篇,本来打算昨天写的,有些小偷懒就今天写了,这一期我们来讨论一下关于镜面反射的基本原理和具体代码.这一篇是承接着上一篇<Esfog_UnityShader教程_漫反射DiffuseR ...
- Spring_MVC_教程_快速入门_深入分析
Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门 资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...
- Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04
摘自: http://www.cnblogs.com/kinglau/p/3796164.html http://www.powerxing.com/install-hadoop/ 当开始着手实践 H ...
- Netty4.x中文教程系列(六) 从头开始Bootstrap
Netty4.x中文教程系列(六) 从头开始Bootstrap 其实自从中文教程系列(五)一直不知道自己到底想些什么.加上忙着工作上出现了一些问题.本来想就这么放弃维护了.没想到有朋友和我说百度搜索推 ...
- 【转】Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04
原文链接:http://dblab.xmu.edu.cn/blog/install-hadoop/ 当开始着手实践 Hadoop 时,安装 Hadoop 往往会成为新手的一道门槛.尽管安装其实很简单, ...
- ArcGIS for Desktop入门教程_第六章_用ArcMap制作地图 - ArcGIS知乎-新一代ArcGIS问答社区
原文:ArcGIS for Desktop入门教程_第六章_用ArcMap制作地图 - ArcGIS知乎-新一代ArcGIS问答社区 1 用ArcMap制作地图 作为ArcGIS for Deskto ...
- 1、windows安装npm教程 --参考自https://www.cnblogs.com/jianguo221/p/11487532.html
windows安装npm教程 1.在使用之前,先类掌握3个东西,明白它们是用来干什么的: npm: nodejs 下的包管理器. webpack: 它主要用途是通过CommonJS 的语法把所有 ...
随机推荐
- Java-SpringMvc-@ResponseBody返回中文字符串乱码
第一种.注解 @RequestMapping(value = "/test.do", method = {RequestMethod.GET},produces = "t ...
- PAT 1018 Public Bike Management[难]
链接:https://www.nowcoder.com/questionTerminal/4b20ed271e864f06ab77a984e71c090f来源:牛客网PAT 1018 Public ...
- 深入理解python之二——python列表和元组
从一开始学习python的时候,很多人就听到的是元组和列表差不多,区别就是元组不可以改变,列表可以改变. 从数据结构来说,这两者都应当属于数组,元组属于静态的数组,而列表属于动态数组.稍后再内存的分配 ...
- .net 调用API并解析Json数据方法
using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using Syst ...
- Fiddler过滤指定域名
Fiddler过滤指定域名的方法一 切换到fiddler右侧窗口的Filters选项卡,勾选顶部的“Use Filters”,找到Hosts区域,设置以下三个选项: 1.第一项有三个选项,不做更改: ...
- unity Texture贴图纹理及相关属性
Texture资源是Unity3d游戏开发中用途最广泛的资源之一,被引用于诸如界面UI. Mesh模型 .粒子效果等.还有一些特殊的Texture资源,如:Movie Texture:视频资源.Ren ...
- 20155213 2016-2017-2 《Java程序设计》第九周学习总结
20155213 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 第十六章 JDBC(Java DataBase Connectivity)即java数据库连 ...
- Openstack创建虚拟机 Restful api和RPC调用
Horizon前台界面用于接受用户的输入或动作(action),然后将这些参数构造成RESTful API(https://developer.openstack.org/api-ref/comput ...
- java后台获取和js拼接展示信息
java后台获取和js拼接展示信息: html页面代码: <div class="results-bd"> <table id="activityInf ...
- linux基础命令---df
df 显示磁盘分区上的磁盘使用状况,可以显示出文件系统名称.大小.挂载点等信息.df显示包含每个文件名参数的文件系统上可用的磁盘空间.如果不给出文件名,则显示所有当前挂载的文件系统上可用的空间.默认情 ...