09 webpack基础(二)

引入vue.js

npm代码

npm install vue --save


并且在入口js文件 main.js中写入

import Vue from &＃39;vue&＃39;const app &＃61; new Vue({el:&＃39;#app&＃39;,data:{message:&＃39;msg&＃39;}
});


并相应的在index.html中写入

<div id&＃61;"app">{{message}}
div>


最后执行

npm run build


打开index.html预览发现并没有效果&＃xff0c;直接显示了

打开控制台发现出现了这样的错误

[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 )

大概意思是这个vue在运行时不能使用&＃xff0c;那么我们就相应的换一个&＃xff0c;在webpack.config.js中写入

resolve:{alias:{&＃39;vue$&＃39;:&＃39;vue/dist/vue.esm.js&＃39;}
}


再次执行

npm run build


index.html的预览就变成

el和template区别

• 正常运行之后&＃xff0c;我们来考虑另外一个问题&＃xff1a;

  • 如果我们希望将data中的数据显示在界面中&＃xff0c;就必须是修改index.html

  • 如果我们后面自定义了组件&＃xff0c;也必须修改index.html来使用组件

  • 但是html模板在之后的开发中&＃xff0c;我并不希望手动的来频繁修改&＃xff0c;是否可以做到呢&＃xff1f;

• 定义template属性&＃xff1a;

  • 在前面的Vue实例中&＃xff0c;我们定义了el属性&＃xff0c;用于和index.html中的#app进行绑定&＃xff0c;让Vue实例之后可以管理它其中的内容

  • 这里&＃xff0c;我们可以将div元素中的{{message}}内容删掉&＃xff0c;只保留一个基本的id为div的元素

  • 但是如果我依然希望在其中显示{{message}}的内容&＃xff0c;应该怎么处理呢&＃xff1f;

  • 我们可以再定义一个template属性&＃xff0c;代码如下&＃xff1a;

    main.js

    import Vue from &＃39;vue&＃39;const app &＃61; new Vue({el:&＃39;#app&＃39;,template:&＃96;

    {{message}}
    &＃96;,data:{message:&＃39;msg&＃39;}
});


    index.html

    <div id&＃61;"app">div>


    效果与前面描述的一致

Vue组件化开发引入

和之前不用webpack一样&＃xff0c;组件化开发的优势还是一样的&＃xff0c;语法上也没有太大的改变

main.js

const cpm &＃61; {template:&＃96;

组件

.vue文件封装处理

用一个js包装一个组件依然不方便&＃xff0c;比如css位置不知道应该放在哪里合适&＃xff0c;这时候就引进一个新方式来组织一个vue组件,.vue

vueCpm.vue

main.js

import vueCpm from &＃39;vue/vueCpm.vue&＃39;
const app &＃61; new Vue({el:&＃39;#app&＃39;,template:&＃96;

新的文件类型自然也需要新的loader

• 安装vue-loader和vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev


ps&＃xff1a;需要css-loader

plugin

插件&＃xff1a;通常是用于对某个现有的架构进行扩展&＃xff0c;

webpack中的插件&＃xff0c;就是对webpack现有功能的各种扩展&＃xff0c;比如打包优化&＃xff0c;文件压缩等等

这里就不仔细介绍了

搭载本地服务器

它是一个单独的模块&＃xff0c;在webpack中使用之前需要先安装它&＃xff0c;npm代码

npm install --save-dev webpack-dev-server&＃64;2.9.1


需要在webpack.config.js添加devserver选项

• contentBase&＃xff1a;为哪一个文件夹提供本地服务&＃xff0c;默认是根文件夹&＃xff0c;我们这里要填写./dist
• port&＃xff1a;端口号
• inline&＃xff1a;页面实时刷新
• historyApiFallback&＃xff1a;在SPA页面中&＃xff0c;依赖HTML5的history模式

package.json中可以配置另一个srcipts

"dev":"webpack-dev-server --open"