Vue学习第六天
Vue06
一.
在webpack环境下集成Vuejs
1.我们想使用Vuejs，那么需要对其有依赖，所以需要先安装。
npm install vue --save
这里注意：我们在后续项目中也会使用vue是运行时依赖，不是开发时依赖，所以不要加上-dev
2.安装完成后，在在我们的main.js使用Vue
import Vue from "Vue"
const app = new vue({
el : "#app",
data : {
message : "Hello World!"
}
})
重新npm run build一下，发现报错了
原因是Vue在构建版本时有两类版本，
①runtime-only -> 代码中不可以有任何的template ，它会将我们挂载的<div id="app"></div>是Vue实例的template
②runtime-compiler -> 代码中可以有template，因为有compiler可以用于编译template
所以需要设置别名，选择第二个版本
在webpack.config.js中加入
resolve: {
alias : {
'vue$' : 'vue/dist/vue.esm.js'
}
}
重新打包，成功显示message
二.
如果同时存在el和template,Vue会将template覆盖el
但是template里的内容会越来越多,很影响阅读和修改.我们该怎么做才能优化这一现象,下面慢慢解决.
1.先以模块化思想将template抽离出去,所以可以使用组件方式
---------------------------------分离后-----------------------------------------
但是这样在main.js里还是很复杂,我们想把这个组件再抽离出去,使得main.js中代码更简洁,只需要展示Vue实例内容就好.
这里的cpn是一个对象,我们可以单独拿出来放一个js文件中,导出这个对象后再在main.js中接受这个对象就好.
但这里又有问题了,我们的模板没有和js代码分离,所以还需要更改.
办法就是创建一个.vue文件
明显看出这里的模板和js代码分离开了,而且还能定义style
<template>
<div>
<h2 class="title">{{message}}</h2>
<button @click="clickBtn">按钮</button>
</div>
</template>
<script>
export default {
name: "cpn",
data(){
return {
message : "Hello World!"
}
},
methods : {
clickBtn(){
console.log("我被点击了");
}
}
}
</script>
<style scoped>
.title{
color: darkgreen;
}
</style>
import cpn from "./vue/cpn.vue"
此时重新打包,还是报错,原因是我们这里用了.vue文件,肯定是需要一个loader来加载.
使用"vue-loader": "^15.9.1"会报错的话
方法①在package.json更改版本为13.0.0,重新install
方法②在webpack.config.js中加入一个plugins
const VueLoaderPlguin = require("vue-loader/lib/plugin"),
重新打包即可成功.
三.
添加版权的Plugin
四.
打包html的Plugin
2.这里可能会出错，修改html-webpack-pligin的版本号就可以了
我这里是"html-webpack-plugin": "^4.2.0", 修改为^3.2.0
3.重新打包后生成了index.html
因为我们这里我们绑定了一个div所以需要添加进去
new HtmlWebpackPlugin({
template : "index.html"
})
设置index.html为模板，
因为会默认帮我们引入script，最终index.html body里就只需要
<body>
<div id="app">
</div>
</body>
五.
js压缩的Plugin
1.安装插件
2.配置插件
六.
搭建本地服务器
1.安装插件
2.配置插件