Webpack配置Vue ｜ 青训营笔记

---

theme: condensed-night-purple

highlight: a11y-dark

这是我参与「第四届青训营 」笔记创作活动的的第9天

在webpack环境中集成Vuejs

希望在项目中使用Vuejs，必然需要对其有依赖，所以需要先进行安装 注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖 没有-dev npm install vue@2.5.21 --save

安装后就可以把vue整个当成一个模块

使用：import Vue from "vue"

没有写路径就会到node_modules找对应东西，找到就会把vue引入 为什么：源码里export default Vue 导出Vue

使用vue ```js // 使用vue进行开发 import Vue from 'vue';

const app = new Vue({ el : '#app', data : { messege : 'hello webpack' } }) ``` 报错：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. 您正在使用Vue的仅运行时版本，而模板编译器不可用。可以将模板预编译为渲染函数，也可以使用包含编译器的内部版本。

解释： 这个错误说的是我们使用的是runtime-only版本的Vue Vue在构建最终发布版本时，有两类版本 - runtime-only：代码中不可以有任何template 不包含编译template的代码 - runtime-compiler：代码中可以有template，因为有compiler可以用于编译template

因为会把div当作vue实例app的template，而我们当前使用的是版本runtime-only，所以报错

解决方案：修改webpack的配置 js resolve : { // alias 别名，外号 alias : { 'vue$' : 'vue/dist/vue.esm.js' // 以后在代码中import Vue from 'vue' // 会先看vue有没有指向具体的文件夹，否则默认vue.runtime.js // vue.esm.js里有compiler // 或者在导入Vue时直接import Vue from ‘vue/dist/vue.esm.js’就不用再配置了 } }

• 安装vue：npm install vue@2.5.21 --save
• 导入：import Vue from "vue"
• 配置：'vue$' : 'vue/dist/vue.esm.js'

创建Vue时template和el关系

SPA:Single Page Application(单页应用程序) 一般只有一个html代码

正常运行之后，我们来考虑另外一个问题： 如果我们希望将data中的数据显示在界面中，就必须是修改index.html 如果我们后面自定义了组件，也必须修改index.html来使用组件 但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？

定义template属性： 在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容 这里，我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素 但是如果我依然希望在其中显示{{message}}的内容，应该怎么处理呢？ 我们可以再定义一个template属性

---

在真实开发中，index.html中只写 <div id="app"></div>

而在vue实例中写template js new Vue({ template : ` <h2>{{messege}}</h2> <button @click="btnClick"></button> <h2>{{name}}</h2> `, })

在vue实例中定义template，vue内部在编译时会自动将<div id="app"></div>替换成template的内容

运行后发现代码中就没有<div id="app"></div>了

vue终极使用方案

1. vue实例里加组件，在子组件里写之前的东西，vue实例的模板只写<子组件名字>

注册组件是components，局部组件。cpn中的template是组件模板，而vue中的template：‘ ’就是使用组件，也可template:' ','效果相同

js const App = { template : ` <div> <h2 class="title">{{messege}}</h2> <button @click="btnClick">按钮</button> <h2>{{name}}</h2> </div> `, data(){ return { messege : 'hello webpack', name : 'sonny' } }, methods : { btnClick(){ console.log('btnClick'); } } } new Vue({ el : '#app', template : `<App></App>`, components : { App } })

1. 新建vue文件夹，app.js文件，在app.js里导出子组件, 在main.js里引入 ``js // app.js export default { template :

// main.js import App from './vue/app' new Vue({ el : '#app', template : <App></App>, components : { App } }) ```

修改vscode默认模板，在安装目录resources下搜索expand-full，这个文件就是

1. 创建app.vue文件，安装配置对应loader：vue-loader 和 vue-template-compiler vue-loader：加载vue文件 vue-template-compiler：对vue进行编译

• 安装：npm install --save-dev vue-loader@15.4.2 vue-template-compiler@2.5.21
• 配置： js { test : /\.vue$/, use : { loader : 'vue-loader' } }

报错：vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. 解决方案: 1. 修改为 "vue-loader": "^13.0.0", 版本在13以上需要plugin插件 npm install 2. 这里可以参考Vue官网安装一个插件，很简单：进入官网-生态系统-工具-Vue-loader-找到导航条上面的如何从v14迁移，第一个就是！ VueLoaderPlugin这个插件可以在vue官网导航栏生态系统里面查看vue-loader中如何安装 3. 配置里面加上plugins:[ new VueLoaderPlugin() ] 和出入口同级

```js

{{messege}}

按钮

{{name}}

```

整个应用程序是一个组件树

能不能简写.vue

修改webpack的配置 js resolve : { extensions : ['.js','.css','.vue'], // 这些后缀可以省略 }