一.模塊加載器
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>