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- ...
随机推荐
- crontab命令详解 含启动/重启/停止
linux 系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的.另 外, 由于使用者自己也可以设置计划任务,所以, ...
- javaweb开发.调试
一.快速调试一个类 1.类里面写public static void main(String[] args) throws Exception{}方法 2.该类上右键->Run As->J ...
- 安卓ViewStub用法
安卓ViewStub用法 在开发应用程序的时候,经常会遇到这样的情况,在运行时动态根据条件来决定显示哪个View或某个布局. 那么最通常的想法就是把可能用到的View都写在上面,先把它们的可见性都设为 ...
- mysql空值排序
SELECT * FROM lzh_topic_channel_product ORDER BY order_id is null , order_id 其中的ORDER BY order_id i ...
- Mac下Tomcat安装与Intellij IDEA配置Tomcat
Mac下Tomcat安装与Intellij IDEA配置Tomcat 一 安装 1 下载地址:https://tomcat.apache.org/download-90.cgi 2 将压缩包解压后移至 ...
- 我的idea突然没有SVN了是怎么回事
总结一下没有svn选项的几种情况: 情况1:IntelliJ IDEA打开带SVN信息的项目不显示SVN信息,项目右键SVN以及图标还有Changes都不显示解决方法 在VCS菜单中有个开关,叫Ena ...
- wind量化交易
https://www.joinquant.com/study?f=home&m=memu https://www.v2ex.com/member/mushroomqiu https://sa ...
- js-实时获取键值码
<script> document.onkeydown=function(event){ console.log(event.keyCode) //在控制台打印 } </scr ...
- BASH 基本语法
本节内容 1. 什么是shell script 2. 变量 3. 运算符 4. 流程控制 5. 函数 6. 计划任务 crontab 一 什么是shell script 将OS命令堆积到 ...
- Go Code Review Comments 译文(截止2018年7月27日)
持续更新中- 原文最新链接 https://github.com/golang/go/wiki/CodeReviewComments/5a40ba36d388ff1b8b2dd4c1c3fe820b8 ...