vue-loader:
vue-loader:
其他loader -> css-loader、url-loader、html-loader..... 后台: nodeJs -> require exports
broserify 模块加载,只能加载js
webpack 模块加载器, 一切东西都是模块, 最后打包到一块了 require('style.css'); -> css-loader、style-loader vue-loader基于webpack .css
.js
.html
.php
..... a.vue
b.vue .vue文件:
放置的是vue组件代码 <template>
html
</template> <style>
css
</style> <script>
js (平时代码、ES6) ES6兼容性需要编译 用babel-loader
</script>
简单的目录结构
简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件,第一个大写,官方推荐命名法
|-package.json 工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.js webpack配置文件 ES6: 模块化开发
导出模块:
export default {}
引入模块:
import 模块名 from 地址
生成package.json 工程文件(项目依赖、名称、配置)
npm init --yes 生成
webpak准备工作:
webpak准备工作:
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev
//App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
cnpm install vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2 --save-dev
npm install webpack webpack-dev-server vue-loader@8.5.4 vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2 --save-dev
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
最最核心:
vue教程3-07 vue-loader的更多相关文章
-
vue教程1-09 交互 vue实现百度下拉列表
vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...
-
vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
-
vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用
vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...
-
vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
-
vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
-
vue教程3-01 路由、组件、bower包管理器使用
vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...
-
vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
-
vue教程2-07 自定义指令
vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...
-
vue教程2-07 微博评论功能
vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...
-
vue教程2-06 过滤器
vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...
随机推荐
-
JS中typeof与instanceof的区别
JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: Typeof typeof 是一个一元运算,放在一个运算数之前 ...
-
自已实现的async 只实现了一部分功能
不得不说,人和人的技术确实有差距,同样的功能,其他人就是有办写写的更优雅性能更好 不论是C还是js 自已有功能但看着也比人家的丑好多. //最终效果 同async //目前实现了个人最常用的 seri ...
-
python 写文件,utf-8问题
写文件报数据. 同样的编码. 含中文字段的输出文件 编码为utf-8 无中文的却是asc import codecstxt = u”qwer”file=codecs.open(“test”,”w”,” ...
-
Android Service使用拾遗[阿里工程师分享]
Service作为android的四大组件之一常用来帮助我们完成一些需要放在后台处理的任务,通过startService和bindService两种方式被调用.因为Service也是在主线程中运行的, ...
-
Cordova VS React Native 谁是未来? - b
对于原生native还是倍加推崇的,极佳的用户体验和性能让我学的如痴如醉,可是互联网这个世界可以用一句话可以总结:没有什么是不可能的.自从阿里淘宝天猫横空出世,它们教会了人们如何在网上购物,然后仿佛一 ...
-
[CSS] :not Selector
The CSS :not() selector allows us to exclude a subset of elements matched by our selector. In this e ...
-
JSP中include指令和include动作区别
首先 <%@ include file=” ”%>:为指令元素 <jsp:include page=” ” flush=”true”/>:为 动作元素 先说指令元素: incl ...
-
好玩的原生js的简单拖拽
这个拖拽的图片不是唯一的,拿到代码自己添加一张照片就可以啦 <!DOCTYPE html><html> <head> <meta charset=" ...
-
Reverse Words in a String I &; Reverse Words in a String II
Reverse Words in a String I Given an input string, reverse the string word by word. For example,Give ...
-
Find a way HDU - 2612
Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. Leave Ningbo one year ...