格式: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. linux下的字符界面和图形界面转换

    linux下的字符界面和图形界面转换 linux下有六个虚拟终端按键ctrl+alt+F1-F6可以进入相应的虚拟终端永久的话修改/etc/inittab将id:5:initdefault:中的5改成 ...

  2. spring 装配集合

    1:创建pojo,属性包含集合,集合元素为基本类型 package com.liyafei.pojo; import java.util.List; import java.util.Map; imp ...

  3. 四、Mosquitto 高级应用之用户配置

    本文将讲解 Mosquitto 用户机制.如果还没有搭建 Mosquitto 服务的可以参考我的另外两篇文章<< 一.Mosquitto 介绍&安装>> << ...

  4. pycharm Unresolved reference 无法引入包

    1. 问题描述: 在项目中P存在文件夹A.B.C,A有文件夹a和b,在a中引入b的一个类, a.py: from b import func1 虽然运行成功,但是在Pycharm中显示: Unreso ...

  5. kendo grid应用经验总结

    学习网址 https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/overview https://demos.telerik. ...

  6. mysql事务详解

    事务的四大特性ACID如下:       原子性:事务中的所有操作,要么全部完成,要么不做任何操作,不能只做部分操作.如果在执行的过程中发了错误,要回滚(Rollback)到事务开始前的状态,就像这个 ...

  7. 植物大战僵尸作弊器源代码(MFC版)

    控制版使用不太方便,此MFC版与控制台版内容一样.具体可以参考前面.此处只附源代码,不加以说明.......... 头文件 // jsMFCDlg.h : 头文件 // #pragma once // ...

  8. hdu4991 树状数组+dp

    这题说的是给了一个序列长度为n 然后求这个序列的严格递增序列长度是m的方案有多少种,如果用dp做那么对于状态有dp[n][m]=dp[10000][100],时间复杂度为n*m*n接受不了那么想想是否 ...

  9. 打造高可靠与高性能的React同构解决方案

    前言 随着React的兴起, 结合Node直出的性能优势和React的组件化,React同构已然成为趋势之一.享受技术福利的同时,直面技术挑战,在复杂场景下,挑战10倍以上极致的性能优化. 什么是同构 ...

  10. SpringBoot之集成WebSocket

    websocket是什么不做介绍.开发环境:jdk1.8,win7_64旗舰版,idea   1.初始化一个springboot项目   2.加入websocket依赖 <!-- springb ...