【Vue】Re11 Vue 与 Webpack
一、案例环境前置准备：
创建一个空目录用于案例演示
mkdir vue-sample
初始化案例和安装webpack
cd vue-sample
npm install webpack@3.6.0 --save-dev
安装Vue
npm install vue --save
保留之前的webpack.config.js
const path = require('path'); /* 这里依赖一个path，这个path来自于npm的包中的一个模块，必须要有path包才能用 */
/* 所以需要装包 npm init */
module.exports = {
entry : './src/main.js', /* 打包的程序入口 */
output : { /* 打包输出的文件，出口路径 分为路径和文件名 */
// path : './dist', /* 路径可以动态获取 */
path : path.resolve(__dirname, 'dist'),
/* __dirname是一个全局变量 值是当前webpackconfig.js文件所在的绝对路径， cans参数二就是我们自定义的目录名称 */
filename : 'bundle.js', /* bundle 意思打包 就是打包好的JS文件 */
},
}
和package.json的打包脚本
"build": "webpack"
还是一样的目录结构
二、引用Vue
在Main.js中导入Vue：
import Vue from 'vue'; /* 模块化使用需要导入 */ const app = new Vue({ el : '#v', data : { message : 'Hello Module Vue!!!' }, });
index.html编写：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="v"> <p>{{message}}</p> </div> <script type="text/javascript" src="./dist/bundle.js"></script> </body> </html>
虽然打包成功，但是并没有看到页面出现效果
浏览器控制台发生Vue的警告：
bundle.js:925 [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.
(found in <Root>)
是因为runtime-only 与runtime-compiler的区别？
解决方法是在webpack.config.js配置中设置这个别名解析：
resolve : {
alias : {
'vue$' : 'vue/dist/vue.esm.js'
}
}
解析正常：
三、Template & El 属性
补充概念：SPWA概念【Simple Page Web Application】
正常的开发不会在页面编写任何代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="v"> <p>{{message}}</p> <!-- 这里不会编写任何东西 --> </div> <script type="text/javascript" src="./dist/bundle.js"></script> </body> </html>
编写的方式变更为这样【main.js】：
import Vue from 'vue'; /* 模块化使用需要导入 */ const app = new Vue({ el : '#v', template : ` <p>{{message}}</p> `, data : { message : 'Hello Module Vue!!!' }, });
template的模板将会把绑定的内容直接替换覆盖掉
四、Component演变渐进
上述的template定义方式只能插入一些简单的内容
如果模板的结构庞大复杂，则需要专门定义声明
main.js的改变：
import Vue from 'vue'; /* 模块化使用需要导入 */ /* 1、移交到这个组件对象中声明管理 */ const App = { template : ` <p>{{message}}</p> `, data () { return { message : 'Hello Module Vue!!!' } }, } new Vue({ /* const app 常量赋值可以不写 */ el : '#v', components : { App /* 2、 以组件的方式注册 */ }, template : '<App/>', /* 3、 以模板的方式把组件渲染 */ // template : ` // <p>{{message}}</p> // `, // data : { // message : 'Hello Module Vue!!!' // }, });
也就是说组件对象它也是一个JS对象
那么组件不久可以移交到JS文件中吗
我们直接创建一个JS文件【app.js】：
export default { template : ` <p>{{message}}</p> `, data () { return { message : 'Hello Module Vue!!!' } }, }
在Main中引入：
import Vue from 'vue'; /* 模块化使用需要导入 */ import App from './js/app'; /* 1、移交到这个组件对象中声明管理 */ // const App = { // template : ` // <p>{{message}}</p> // `, // data () { // return { // message : 'Hello Module Vue!!!' // } // }, // } new Vue({ /* const app 常量赋值可以不写 */ el : '#v', components : { App /* 2、 以组件的方式注册 */ }, template : '<App/>', /* 3、 以模板的方式把组件渲染 */ // template : ` // <p>{{message}}</p> // `, // data : { // message : 'Hello Module Vue!!!' // }, });
我们对APP组件的修改只需要在app.js文件中就行了
但是目前的问题是模板的HTML代码还没有和JS代码进行分离
所以Vue创建了一个新的文件【组件文件】XXX.vue
<template> </template> <script> export default { name: "app" } </script> <style scoped> </style>
template就表示我们的模板
script表示编写的JS代码
而style专门处理样式编写
五、Loader支持
.vue文件并不能被识别解析，所以需要对应的提供一套Loader帮助webpack
npm install vue-loader@13.0.0 vue-template-compiler --save-dev
然后配置：
const path = require('path'); /* 这里依赖一个path，这个path来自于npm的包中的一个模块，必须要有path包才能用 */
/* 所以需要装包 npm init */
module.exports = {
entry : './src/main.js', /* 打包的程序入口 */
output : { /* 打包输出的文件，出口路径 分为路径和文件名 */
// path : './dist', /* 路径可以动态获取 */
path : path.resolve(__dirname, 'dist'),
/* __dirname是一个全局变量 值是当前webpackconfig.js文件所在的绝对路径， cans参数二就是我们自定义的目录名称 */
filename : 'bundle.js', /* bundle 意思打包 就是打包好的JS文件 */
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader','css-loader' ] /*'style-loader',*/
},
{
test: /\.vue$/,
use: [ 'vue-loader' ]
},
]
},
resolve : {
alias : {
'vue$' : 'vue/dist/vue.esm.js'
}
}
}
注意main.js的导入
import Vue from 'vue'; /* 模块化使用需要导入 */ import App from './component/app.vue'; /* 1、移交到这个组件对象中声明管理 */ // const App = { // template : ` // <p>{{message}}</p> // `, // data () { // return { // message : 'Hello Module Vue!!!' // } // }, // } new Vue({ /* const app 常量赋值可以不写 */ el : '#v', components : { App /* 2、 以组件的方式注册 */ }, template : '<App/>', /* 3、 以模板的方式把组件渲染 */ // template : ` // <p>{{message}}</p> // `, // data : { // message : 'Hello Module Vue!!!' // }, });
