vue-05-webpack安装-vue单文件启动
1, webpack是什么
1), 是一个打包工具,
比gulp, grunt更先进
2), 额外功能
项目部署上线, 清空目录等
hot module reload, 页面刷新后, 数据不变化
3), 打包流程
css, js等打包成bundle.js文件
js: babel-loader 来加载, 编译
最终根据依赖关系生成app.js
split point: 将大文件分割为多个文件, 提升用户体验
2, webpack安装
1), 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2), 检查npm版本
npm -v
3), 安装webpack到全局
npm install webpack -g
4), 生成package.json
npm init
5), 为项目添加webpack依赖
npm install webpack --save-dev
6), 将js编译打包
webpack hello.js hello.bundle.js
7), 安装css的loader转换器和style的laoder转换器
npm install css-loader style-loader --save-dev
8), 文件变化时, 自动编译
webpack hello.js hello.bundle.js --watch
3, 配置文件
webpack.json.js
# 引入webpack
const webpack = require('webpack'); # 遵循 commonjs规范
module.exports = {
vue-05-webpack安装-vue单文件启动的更多相关文章
- webpack 安装vue(两种代码模式compiler 和runtime)
使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...
- vue生命周期及使用 && 单文件组件下的生命周期
生命周期钩子 这篇文章主要记录与生命周期相关的问题. 之前,我们讲到过生命周期,如下所示: 根据图示我们很容易理解vue的生命周期: js执行到new Vue() 后,即进入vue的beforeCre ...
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- vue卸载与安装+vue创建项目
vue卸载 npm uninstall -g vue-cli npm install -g @vue/cli 和 npm install -g @vue/cli-init 命令安装新版本vue-cli ...
- vue项目webpack打包后有的文件big 问题
vue项目打包的时候,有的big, 超过1M, 需要进行优化,方法有: 1. 非首屏图片,可以采用懒加载的方式, 如:图片的懒加载, vue中路由的懒加载 等 2. 各个模块, 采用如sea ...
- Vue知识整理16:单文件组件
过程较为复杂,这里直接写出视频地址,可以直接查看 https://learning.dcloud.io/#/?vid=14
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- Vue系列之 => webpack结合vue使用
安装 npm i vue -S , 在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...
- Chrome安装Vue.js devtool F12无效
要安装 vue-devtools-4.1.4_0 链接: https://pan.baidu.com/s/1aeUxKJEUDW0U_i6uuAZFvQ 提取码: 4btc vue-devtools- ...
随机推荐
- c#mysql批量更新的两种方法
总体而言update 更新上传速度还是慢. 1: 简单的insert 速度稍稍比MySqlDataAdapter慢一点 配合dapper 配置文件 <?xml version="1 ...
- 搭建Fabric网络(三)artifacts是怎么生成的:cryptogen和configtxgen
在first-network里,./byfn.sh generate可以生成artifacts文件. generate参数其实是使用了cryptogen和configtxgen这两个工具,这两个工具分 ...
- Django 载入静态文件地址
1,Django框架中有专门存放静态文件的目录. 项目中的CSS.图片.js都是静态文件 配置静态文件 在settings 文件中定义静态内容 2,这些静态文件,他们统一存放在项目目录,templat ...
- Java ,python面向对象的继承及其区别
JAVA JAVA继承基本样式 class Demo extends Object{ Demo(int a){ this(); } Demo(){ super(); } } java默认继承Objec ...
- 关于UIScrollView不能响应UITouch事件的解决办法
原因是:UIView的touch事件被UIScrollView捕获了. 解决办法:让UIScrollView将事件传递过去.于是最简单的解决办法就是加一个UIScrollView的category.这 ...
- Android开发工程师文集-1 小时学会各种Drawable
前言 大家好,给大家带来Android开发工程师文集-1 小时学会各种Drawable的概述,希望你们喜欢 Drawable介绍 Drawable为抽象类,drawable与view有区别的地方,主要 ...
- js的微观性能
概述 js的微观性能是指js的某一个表达式或者某一行或者某一块代码的性能.几天前和同事讨论过这方面的内容,今天深入研究了一下,记录下来,供以后开发时参考,相信对其他人也有用. 从一段代码说起 记得以前 ...
- vue中的双向绑定
概述 今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其 ...
- nginx代理tomcat做负载
先对三台服务器统一环境. 对两台tomcat服务器的操作 查看jdk环境 # java -version openjdk version "1.8.0_65" OpenJDK Ru ...
- python实现stack并测试
栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一端进行插入和删除运算. 这一端被称为栈顶,相对地,把另一端称为栈底.向一个栈插入新元素又称作进栈.入栈或压栈,它是把新 元素放 ...