vue-loader的简单例子
一.模块加载器
1.broserify 模块加载器, 只能加载js
2.webpack 模块加载器, 一切东西都是模块, 最后打包到一块
.vue文件 ==> 需要用webpack编译成浏览器可读文件
vue组件代码, 三块代码
1. <template></template> ==> 放html
2. <style></style> ==> 放css
3. <script></script> ==> js代码
二.不使用vue-cli来创建, 手动创建
1..初如化package.json
& npm init --yes // 默认
生成vue-loader-demo目录
F:\learning\znsvue>md vue-loader-demo
删除目录
F:\learning\znsvue> del vue-loader-demo3
2.vue-loader-demo创建以下文件
|-index.html 首页
|-main.js 入口js文件
|-App.vue vue文件(第一个字母大写, 官方推荐命名法)
|-package.json 工程文件(项目依赖, 名称, 配置)
|-webpack.config.js webpack配置文件
|-components/Menu.vue 公用html
3.webpack准备工作
App.vue ==> 用vue-loader来编译
& npm install vue --save
& npm install vue-loader --save
& npm install webpack --save-dev
& npm install webpack-dev-server --save-dev & npm install vue-loader --save-dev
& npm install vue-html-loader --save-dev
& npm install css-loader --save-dev
& npm install vue-style-loader --save-dev
& npm install vue-hot-reload-api --save-dev
& npm install vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api --save-dev
ES转换, babel编译
& npm install babel-loader --save-dev
& npm install babel-core --save-dev
& npm install babel-plugin-transform-runtime --save-dev
& npm install babel-preset-es2015 --save-dev
& npm install babel-runtime --save-dev
& npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev
4.在webpack.config.js配置好
module.exports = {
entry: "./main.js", // 入口js文件
output: {
path: __dirname,
filename: "build.js" // 输出js文件
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
query:{
presets: 'es2015'
},
exclude: /node_modules/
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
}
5.在package.json配置webpack打包
"scripts": {
"dev": "webpack-dev-server --inline --hot"
},
6.index.html里引入output的build.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box">
<Hello></Hello>
</div>
<script src="build.js"></script>
</body>
</html>
$ npm run dev
命令行运行webpack命令，
如果发现页面有报错： [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
运行时构建不包含模板编译器，因此不支持 template 选项，只能用 render 选项，但即使使用运行时构建，在单文件组件中也依然可以写模板，因为单文件组件的模板会在构建时预编译为 render 函数。
上面一段是官方api中的解释。就是说，如果我们想使用template，在webpack.config.js添加以下以行
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
7.在main.js里导入vue文件
import Vue from 'vue';
import Hello from "./App.vue"; new Vue({
el: "#box",
template: '<Hello/>',
components: { Hello }
})
8.主要App.vue文件中
<template>
<div class="huangtao">
<div @click="change()">{{msg}}</div>
<my-menu></my-menu>
</div>
</template> <script>
import Menu from "./components/Menu.vue"; export default {
data () {
return {
msg: '这是App.vue内容'
}
}, methods: {
change(){
this.msg = "new Hello World!"
}
}, components: {
"my-menu" : Menu
}
}
</script> <style>
html {
background: green;
color: #fff;
font-size: 20px;
}
</style>
9.components/Menu.vue文件中
<template>
<ul>
<li @click="change()">{{msg}}</li>
</ul>
</template>
<script>
export default {
data () {
return {
msg: '这是引入Menu.vue内容'
}
}, methods: {
change(){
this.msg = "new Hello World!"
}
}
}
</script>
vue-loader的简单例子的更多相关文章
- vue 快速入门 系列 —— vue loader 下
其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...
- vue 快速入门 系列 —— vue loader 扩展
其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...
- Hibernate4.2.4入门(一)——环境搭建和简单例子
一.前言 发下牢骚,这段时间要做项目,又要学框架,搞得都没时间写笔记,但是觉得这知识学过还是要记录下.进入主题了 1.1.Hibernate简介 什么是Hibernate?Hibernate有什么用? ...
- AgileEAS.NET SOA 中间件平台.Net Socket通信框架-简单例子-实现简单的服务端客户端消息应答
一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍 在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...
- spring mvc(注解)上传文件的简单例子
spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...
- ko 简单例子
Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Declarative bindings) 模板 ...
- mysql定时任务简单例子
mysql定时任务简单例子 ? 1 2 3 4 5 6 7 8 9 如果要每30秒执行以下语句: [sql] update userinfo set endtime = now() WHE ...
- java socket编程开发简单例子 与 nio非阻塞通道
基本socket编程 1.以下只是简单例子,没有用多线程处理,只能一发一收(由于scan.nextLine()线程会进入等待状态),使用时可以根据具体项目功能进行优化处理 2.以下代码使用了1.8新特 ...
- 一个简单例子：贫血模型or领域模型
转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...
- [转] 3个学习Socket编程的简单例子：TCP Server/Client, Select
以前都是采用ACE的编写网络应用,最近由于工作需要,需要直接只用socket接口编写CS的代码,重新学习这方面的知识,给出自己所用到的3个简单例子,都是拷贝别人的程序.如果你能完全理解这3个例子,估计 ...
随机推荐
- ubuntu下安装和配置apache2+SVN的详细方法介绍
ubuntu安装和配置SVN第一步:安装apache2 libapache2-svn subversionsudo apt-get install apache2sudo apt-get insta ...
- 内存管理 初始化（七）kmem_cache_init_late 初始化slab分配器(下)
我们知道kmem_cache中对于每CPU都有一个array_cache,已作为每CPU申请内存的缓存. 此函数的目的在于:每个kmem_cache都有一个kmem_list3实例,该实例的shar ...
- ARC介绍
从Ray Wenderlich的教程中截取了一小段作为对objective c中ARC的介绍,讲得比较清晰,原文有丰富的例子,见此 它是怎么工作的 你大概已经熟悉如何手工管理内存了, 就像这样:如果你 ...
- xcode 5.1打包iOS 7.1应用问题笔记
XCODE 5.1默认情况下是要求应用都通过64位编译.但是往往有些第三方的类库还是32位.还木有更新64位类库.使得项目编译出错. 解决办法: BuildSetting 的Valid Archite ...
- Android数据库升级、降级、创建(onCreate() onUpgrade() onDowngrade()）的注意点
以下内容可以作为面试官在面试的时候的问题,感觉比较好,是比较常用的知识点,可以用来考察基础是否扎实. 也可以程序猿学习.开发中的注意点.因为稍微不注意,就有可能导致数据库不能用. DBAdapter. ...
- Eclipse------导入项目后出现Java compiler level does not match the version of the installed Java project facet
报错信息:Java compiler level does not match the version of the installed Java project facet 解决方法: 1.点击工具 ...
- TTL值
我们在解析域名时经常出现 TTL 这个字段,里面默认写的是 10 分钟. 另外,有时候我们 ping 某域名或 IP 的时候,会出现 TTL= XXX. 一.什么是域名的 TTL 值? TTL(Tim ...
- Windows 2012 R2 安装Nessus
1.nessus官网注册 注册地址:https://www.tenable.com/products/nessus-home Name字段随意,邮箱需要填写自己的,方便接受注册码 2.注册后,登录邮箱 ...
- PHP代码审计笔记--任意文件下载漏洞
在文件下载操作中,文件名及路径由客户端传入的参数控制,并且未进行有效的过滤,导致用户可恶意下载任意文件. 0x01 客户端下载 常见于系统中存在文件(附件/文档等资源)下载的地方. 漏洞示例代码: ...
- Unity Shader 修改自定义变量的值
Properties { _R(,)) = 1.0 _ColorTex("ColorTex (RGB)", 2D) = "red" {} } SubShader ...