查看专栏目录: VUE

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等

为什么要用vite来打包vue2

最近在开发vue2+openlayers项目的时候，碰到一个问题。加载webglTile时候，报错。原来使用的是webpack，怎么调试都不太好使，最后看到官方使用的是vite，然后就打算更改webpack为vite来解决这一个问题。 这里面要注意要含有vite-plugin-vue2 和 vite

搭建步骤

1，安装vite创建项目

npm init vite@2.8.0

注意事项：
这里使用2.8.0版本，亲测好用，其他版本是否出问题，需要自己去测试。vite默认支持的是vue3， 这里选择框架和版本vanilla， 方便以后自己安装vue2.

2，进入 vue2-vite 项目

（1）修改 package.json文件为

{
  "name": "vue2-vite",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "serve": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.8.0",
    "vite-plugin-vue2": "^2.0.3"
  },
  "dependencies": {
    "vue": "^2.6.11",
	"vue-router": "^3.2.0",
	"vuex": "^3.4.0",
	"axios": "^0.24.0",
	"element-ui": "^2.15.6",
    "vue-template-compiler": "^2.6.11"
  }
}

（2） 安装这些插件和依赖

npm install

（3） 配置vite.config.js

import { defineConfig } from 'vite' // 动态配置函数
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'

export default () =>
	defineConfig({
		plugins: [createVuePlugin()],
		server: {
			open: true, //自动打开浏览器
			port: 8765 //端口号
		},
		resolve: {
            // 别名
			alias: [
				{
					find: '@',
					replacement: '/src'
				}
			]
		}
	})

(4) 将其他文件放到项目中

（5）配置好的文件请下载

链接：https://download.csdn.net/download/cuclife/88777526

解压后安装运行项目

npm install
npm run serve

运行结果：