安裝vue，因為后續(xù)在項目中也會使用vue,所以并不是開發(fā)時依賴
npm install vue --save
我們在編譯完后會出現(xiàn)如下錯誤：
vue3.jpg
這是因為runtime-only ->代碼中，不可以有任何的template
runtime-compiler ->代碼中，可以有template,因為有compiler可以用于編譯compiler
解決方法：添加alias別名來指定
vue7.jpg
安裝vue-loader和vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
webpack.config.js文件中配置規(guī)則
{
test:/\.vue$/,
use:['vue-loader']
}
目前所用到的loader及項目結構如下：
vue8.jpg
App.vue內(nèi)容
<template>
<div>
<h2 class="title">{{message}}</h2>
<button @click="btnClick">按鈕</button>
<h2>{{name}}</h2>
<Cpn/>
</div>
</template>
<script>
//引入組件
import Cpn from './Cpn';
export default {
name:'App',
data(){
return {
message:'Hello Webpack',
name:'詹姆斯'
}
},
components:{
Cpn
},
methods:{
btnClick(){
}
}
}
</script>
<style scoped>
.title{
color:yellow;
}
</style>>
</style>
cpn文件內(nèi)容
<template>
<div>
<h2>我是組件CPN</h2>
<h2 class="title">{{cName}}</h2>
</div>
</template>
<script>
export default {
name:'Cpn',
data(){
return {
cName:'組件'
}
}
}
</script>
<style>
.title{
color:pink;
}
</style>
入口文件內(nèi)容：
// 1、使用common.js的模塊化規(guī)范
const {add, mul} = require('./js/mathUtils.js')
console.log(add(20, 30));
console.log(mul(20, 30));
//2、使用ES6的模塊化的規(guī)范
import {name, age, height} from "./js/info";
console.log(name);
console.log(age);
console.log(height)
//3、依賴css文件
require('./css/normal.css')
//4、依賴less文件
require("./css/special.less")
document.writeln("<h2>你好啊</h2>")
//5、使用vue進行開發(fā)
// 引入vue
import Vue from 'vue';
//引入app組件
import App from './vue/app.vue';
new Vue({
//el和template的關系：template會替換el
el:'#app',
template:'<App/>',
components:{
App
}
})
頁面內(nèi)容
<body>
<div id="app">
</div>
<script src="./dist/bundle.js"></script>
</body>
