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这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
随机推荐
- 【BZOJ4826】【HNOI2017】影魔
题意: Description 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄. ...
- Linux入门基础（一）
UNIX/Linux 本身是没有图形界面的,我们通常在 UNIX/Linux 发行版上看到的图形界面实际都只是运行在 Linux 系统之上的一套软件XFree86,现在则是 xorg(X.Org),而 ...
- XML快速注释
eclipse中编辑java或C/C++,python文件时,注释的快捷键均为 "CTRL + / ",编辑xml文件时,该快捷键无效. eclipse XML 注释:CTRL + ...
- gps 地图
http://www.cnblogs.com/sylvanas2012/p/5342530.html http://blog.csdn.net/ma969070578/article/details/ ...
- Hive中建表注释为乱码的解决方式
Hive中建表注释为乱码的解决方式 可以查看http://www.cnblogs.com/stono/p/7813711.html进行手动修改: 如果要解决,在Ambari配置界面中,选择Hive,输 ...
- Flex 远程视频监控观看端新版
第一个版本号仅仅做了预览这一块 http://blog.csdn.net/songanling/article/details/38306037,后面老板看了认为色调太暗.看得不舒服,然后就開始又一次 ...
- Android 经常使用工作命令mmm,mm,m,croot,cgrep,jgrep,resgrep,godir
官方定义: Invoke ". build/envsetup.sh" from your shell to add the following functions to your ...
- BZOJ5042: LWD的分科岛
[传送门:BZOJ5042] 简要题意: 给出n个数,q个询问,每个询问输入opt,l,r,如果opt=1,则输出l到r中的最小值,否则输出最大值 题解: 直接上ST表,自信一波,结果 MLE??好吧 ...
- android JNI 一维数组、二维数组的访问与使用
在JNI中访问JAVA类中的整型.浮点型.字符型的数据比较简单,举一个简单的例子,如下: //得到类名 jclass cls = (*env)->GetObjectClass(env, obj) ...
- Struts2国际化-getText()方法
转自https://blog.csdn.net/qq_43560838/article/details/83747604 一:简单理解 国际化简称i18n,其来源是英文单词 international ...