配置自己的 webpack 于 Vue

如果你不想手动设置 webpack ,我们推荐使用 Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置,做到开箱即用。

如果 Vue CLI 提供的内建没有满足你的需求,或者你乐于从零开始创建你自己的 webpack 配置,那么请继续阅读这篇指南

Tips: 上官方手册错误处:安装 loader 插件引入应该为const VueLoaderPlugin = require('vue-loader/lib/plugin') --> const {VueLoaderPlugin} = require('vue-loader')

安装 vue

npm install vue --save

需要的地方直接

// src/main.js
import Vue from 'vue'

const app = new Vue({
  el:'#app',
  data: {
    msg: 'hello word',
  }
})
// 没有配置的情况下,在html中使用 msg, 无效
<!-- index.html -->
<div id="#app">{{msg}}</div>

下载的 Vue 有多个版本,而默认使用的版本 vue.runtime.min.js 不支持 模板, 需要更改配置为 vue.esm.js. (esm: esModule)

Tips: 官网:如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版

// webpack.config.js
module.exports = {
  // ...
  resolve: {
      // 别名
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
}

使用

el 和 tenplate

结合 el 和 tenplate

html 模板在之后的开发中,不希望手动的来频繁修改,可以使用 template 属性和 el 属性结合,使其替换原绑定元素的内容。

// src/main.js
import Vue from 'vue'

const app = new Vue({
  el:'#app',
  template: `
  <div>
      <h2>{{msg}}</h2>      
  </div>
  `,
  data: {
    msg: 'hello word',
  }
})
// 没有配置的情况下,在html中使用 msg, 无效
<!-- index.html -->
<div id="#app"></div>

抽离 template 内容封装为组件

// src/main.js
const App= {  
  // 可以在直接封装为一个 模块引入 App
  template: `
  <div>
      <h2>{{msg}}</h2>   
      <button @click="btnClick">按钮</button>
  </div>`,
  data(){
    return {
      msg: 'hello world'
    }
  },
  methods: {
    btnClick(){
      console.log('点击 btn');
    }
  }
}

const app = new Vue({
  el: "#app",
  template: "<App />",
  components: {
    App,
  }
})

将组件改为 .vue 文件

  1. 安装依赖的 loader
npm install vue-loader vue-template-compiler --save-dev
  1. 配置 loader
// webpack.config.js
const {VueLoaderPlugin} = require('vue-loader')

// 这是是官网的示例引入,错误的 新版本的 vue-loader安装后,目录下根本没有这个 主目录
// const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  module: {
    rules: [      
      {
        test: /\.vue$/,
        use: ['vue-loader']
      },
    ],
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ],
}
  1. 抽离为 .vue 文件
// vue/App.vue
<template>
  <div>
    <h2 class="h2">{{ msg }}</h2>
    <button @click="btnClick">按钮</button>
    <Info />
  </div>
</template>

<script>
import Info from "./Info.vue"
export default {
  name: "App",
  components: {
    Info,
  },
  data() {
    return {
      msg: "hello world",
    }
  },
  methods: {
    btnClick() {
      console.log("点击 btn")
    },
  },
}
</script>

<style>
.h2 {
  color: antiquewhite;
}
</style>
  1. 使用
import App from "./vue/App.vue"

完整代码示例及已安装的依赖项


相关推荐:

来自系列:Vue 笔记

分类 前端下文章:

微信小程序开发 days1 关注点:文件结构,json配置文件, 模板语法

小程序开发学习笔记 days2。 关注点:view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox

小程序学习笔记 days3。 关注点:生命周期,自定义组件

小程序学习笔记 days4。 关注点:scroll-view, Promise

css3 选择器,背景定义(定位), 盒子定位,弹性布局,栅格系统。还有一些常用的 css 属性。

更多...

评论([[comments.sum]])

发表

加载更多([[item.son.length-2]])...

发表

2020-11 By chuan.

Python-flask & bootstrap-flask

图片外链来自:fghrsh

互联网ICP备案号:蜀ICP备2020031846号