Webpack配置使用Vue

首先把上篇所写的代码复制一份。接着引入vue。通过npm install vue --save下载

接着在main.js中导入vue并编写

接着编写index.html。添加id，使用差值表达式

使用npm run build重新打包项目。查看页面

发现报错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>)

这是因为使用import导入的vue是runtime-only版本的代码中，不可有任何的template。<div id="#app"></div>中的内容就是vue实例的template。所以我们要导入使用runtime-compiler版本的vue。可以编译template的版本

配置webpack.config.js

通过配置resolve对象中的alias属性，给vue起个别名。当import导入vue时，导入的是node_modules中的vue/dist/vue.esm.js这是runtime-compiler版本的vue

接着重新打包npm run build查看页面效果。使用vue正常

Vue实例属性template和el的关系

一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

这时候我们可以把index.html中的差值表达式给删除

接着我们修改main.js中vue的实例对象，添加template属性

使用vue实例对象的template属性利用模板字符串将el挂载的元素替换

重新npm run build重新打包。查看页面效果

Vue的使用推演

局部组件

通过使用Vue实例的template属性进一步优化了Vue的使用。接着我们使用局部组件来进行优化。

定义一个局部组件对象，并在Vue实例对象中注册，在Vue实例对象中的template属性中使用局部组件标签。从而加载到el挂载到的元素中

重新打包npm run build查看页面效果。效果正常

export default

我们利用ES6的特性export default将我们的局部组件对象放到创建的vue目录下的app.js文件中

在main.js中通过import关键字导入app.js的局部组件对象

重新打包npm run build查看页面效果。效果正常

单文件组件

每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块。

模板template

• 每个 .vue 文件最多包含一个 <template> 块。
• 内容将被提取并传递给 vue-template-compiler 为字符串，预处理为 JavaScript 渲染函数，并最终注入到从 <script> 导出的组件中。

脚本script

• 每个 .vue 文件最多包含一个 <script> 块。
• 这个脚本会作为一个 ES Module 来执行。
• 它的默认导出应该是一个 Vue.js 的组件选项对象。也可以导出由 Vue.extend() 创建的扩展对象，但是普通对象是更好的选择。
• 任何匹配 .js 文件 (或通过它的 lang 特性指定的扩展名) 的 webpack 规则都将会运用到这个 <script> 块的内容中。

样式style

• 默认匹配：/\.css$/。
• 一个 .vue 文件可以包含多个 <style> 标签。
• <style> 标签可以有 scoped 或者 module 属性 (查看 scoped CSS和 CSS Modules) 以帮助你将样式封装到当前组件。具有不同封装模式的多个 <style> 标签可以在同一个组件中混合使用。
• 任何匹配 .css 文件 (或通过它的 lang 特性指定的扩展名) 的 webpack 规则都将会运用到这个 <style> 块的内容中。

自定义块

可以在 .vue 文件中添加额外的自定义块来实现项目的特定需求，例如 <docs> 块。vue-loader 将会使用标签名来查找对应的 webpack loader 来应用在对应的块上。webpack loader 需要在 vue-loader 的选项 loaders 中指定。

更多细节，查看自定义块。

使用

我们在vue目录下创建一个App.vue文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZOZHbbdG-1601296180205)(https://gitee.com/kylincw/images/raw/master/img/20200610203017.png)]

App.vue文件本身就是一个组件对象。所以我们只要在main.js中通过import关键字导入即可

由于我们使用单文件组件文件。也就是.vue结尾的文件。所以我们要下载相对应的loadernpm install vue-loader vue-template-compiler --save-dev

接着配置webpack-config.js

使用npm run build命令打包。报错提示需要配置插件

我们将vue-loader的版本降到13.7.3.通过npm uninstall vue-loader卸载，之后通过npm install vue-loader@13.7.3 --save-dev安装

接着重新打包npm run build,查看页面效果。成功

组件引用组件

创建一个Cpn.vue文件

在App.vue中的script标签通过import引入Cpn组件对象

此时main函数还是导入App.vue组件。不过App组件中使用了Cpn组件。