vue23: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需要webpack编译成浏览器可以看懂的。 .vue文件:
放置的是vue组件模块代码 <template>
html
</template> <style>
css
</style> <script>
js （平时代码、ES6浏览器兼容性不好） babel-loader编译成es5代码
</script>
-------------------------------------
简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件，官方推荐命名法第一个字母大写
|-package.json 工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.js webpack配置文件 ES6: 模块化开发
导出模块：
export default {}
引入模块:
import 模块名 from 地址
--------------------------------------------
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 vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2（加载js的） babel相关插件：
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime 最最核心：
下载 "vue": "^1.0.28"
webpack.config.js
module.exports={
entry:'./main.js', //入口文件
output:{ //出口
path:__dirname,
filename:'build.js'//官方名称
},
module:{
loaders:[
{test:/\.vue$/, loader:'vue-loader'},// \.是转义，vue$以vue结尾的文件，用vue-loader编译，
{test:/\.js$/, loader:'babel', exclude:/node_modules/}//编译js结尾的文件，使用abel-loader来编译，
]
},
babel:{
presets:['es2015'],
plugins:['transform-runtime']
}
};
package.json
{
"name": "vue-loader-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --port 8082"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.25.0",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.4",
"vue-style-loader": "^1.0.0"
},
"dependencies": {
"vue": "^1.0.28"
}
}
main.js
import Vue from 'vue' //下载的 "vue": "^1.0.28"
import App from './App.vue' new Vue({
el:'body',
components:{
app:App
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<app></app> <!--组件-->
<script src="build.js"></script> <!--出口js文件-->
</body>
</html>
App.vue
<template>
<h1>welcome Vue</h1>
<h2 @click="change">{{msg}}</h2>
<my-menu></my-menu>
</template>
<script>
import Menu from './components/Menu.vue' export default{
data(){
return {
msg:'welcome Vue ^_^'
}
},
methods:{
change(){
this.msg='wahaha'
}
},
components:{
'my-menu':Menu
}
}
</script>
<style>
body{
background: #ccc
}
</style>
Menu.vue
<template>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</template>
<script> </script>
vue23:vue-loader的更多相关文章
- Vue Loader
介绍 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug(模板 ...
- vue 快速入门 系列 —— vue loader 上
其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...
- vue 快速入门 系列 —— vue loader 下
其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...
- vue 快速入门 系列 —— vue loader 扩展
其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...
- 配置webpack loader vue 报错：Module build failed: TypeError: this._init is not a function
单文件组件 引入时报错 配置webpage.config.js中的vue 需要如下写法 { test: /\.vue/, loader: "vue-loader", } 之前写的l ...
- vue Module parse failed: Unexpected token You may need an appropriate loader to handle this file type
1.错误截图: 2.错误原因:webpack 原生只支持 js 文件类型,及 es5 的语法 3.解决方法:在webpack.config.js中,增加以下配置 module: { rules: [ ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...
- vue+node+es6+webpack创建简单vue的demo
闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...
- webpack构建vue项目（配置篇）
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
随机推荐
- Python数据分析前提-----pandas
1.read_csv(url):读取数据 2.help(read_csv):打印函数相关用法 3.数据名.dtypes:读取数据的类型(int.float……) 4.type(数据名):读取所有数据的 ...
- 【python爬虫和正则表达式】爬取表格中的的二级链接
开始进公司实习的一个任务是整理一个网页页面上二级链接的内容整理到EXCEL中,这项工作把我头都搞大了,整理了好几天,实习生就是端茶送水的.前段时间学了爬虫,于是我想能不能用python写一个爬虫一个个 ...
- 紫书 习题 11-4 UVa 1660 （网络流拆点法）
这道题改了两天-- 因为这道题和节点有关, 所以就用拆点法解决节点的容量问题. 节点拆成两个点, 连一条弧容量为1, 表示只能经过一次. 然后图中的弧容量无限. 然后求最小割, 即最大流, 即为答案. ...
- Java统计一篇文章中每个字符出现的个数
大家可以参考下面代码,有什么疑问请留言... import java.io.BufferedReader; import java.io.FileInputStream; import java.io ...
- Opencv 三对角线矩阵(Tridiagonal Matrix)解法之(Thomas Algorithm)
1. 简介 三对角线矩阵(Tridiagonal Matrix),结构如公式(1)所示: aixi−1+bixi+cixx+1=di(1) 其中a1=0,cn=0.写成矩阵形式如(2): ⎡⎣⎢⎢⎢⎢ ...
- Hellow BeiJing
DAY1: (#^.^#),今天是9.23日,离出发去北京还有7天,好像一切还是正常的样子. 先发一张图,这就是我们机房的日常: 但是o(￣ヘ￣o#)我听着我耳边的cys童鞋的rap就感觉事情仿佛没辣 ...
- 好的Unix工具的九大启发
我们每天都在使用前人开发的各种工具. 一款好的工具能无缝地融入到你的工作环境中,而一款"差"的工具经常须要花费额外的精力才干集成到你的工作环境中. (注意:这里的差是指用户体验方面 ...
- HDU 5297 Y sequence Y数列
题意:给定正整数n和r.定义Y数列为从正整数序列中删除全部能表示成a^b(2 ≤ b ≤ r)的数后的数列,求Y数列的第n个数是多少. 比如n = 10. r = 3,则Y数列为2 3 5 6 7 1 ...
- new，malloc，GlobalAlloc具体解释
WINDOWS下最好的方式是用VirtualAlloc分配内存,他不是在堆,也不是栈,而是直接在进程的地址空间中保留一快内存.尽管用起来最不方便. 可是速度快,也最灵活 new,malloc,Glob ...
- Session、Cookie总结
什么是sessnion,session存在哪,能存多久.怎么设置他的存储时间 一.什么是session 1.session 被翻译为会话.当client(一般都是浏览器作为client)訪问serve ...