简介

Vite下一代前端开发与构建工具，vite的构建项目的速度毋庸置疑

但是Vite 没有提供 Vue2的创建方式，对未学习vue3的小伙伴来说，不能直观去感受vite的强大之处

屏幕快照 2022-03-09 下午5.07.23.png 使用vite也可以重构老项目，这样你的构建速度，秀的飞起。

初始化项目

使用vite初始化一个vue3的项目，官方提供了三种方法

// 使用npm 安装node.js
npm init vite@latest

// 使用yarn
yarn create vite

// 使用pnpm
pnpm create vite

前两种方式对前端来说都是比较常用的，建议新手使用第一种方式创建。

创建后，先使用npm install安装依赖文件，vite初始化项目不会安装依赖，所以需要手动安装依赖。

目录结构

.
├── public                  
│   ├── favicon.ico           
├── src                     
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js

依赖文件

安装 vite 对 vue2 支持的插件

前提：要在 vite 里运行 vue2 项目，需要安装一个 vite 的插件：vite-plugin-vue2

// 使用npm
npm install vite-plugin-vue2 -D

// 使用cnpm
cnpm install vite-plugin-vue2 -D

// 使用yarn
yarn add vite-plugin-vue2 -D

引入 vite-plugin-vue2 插件，并用 Vite 提供的插件注册方法来注册

安装成功后需要在vite.config.js里配置如下：

import { createVuePlugin } from 'vite-plugin-vue2'
 
export default {
  plugins: [createVuePlugin()]
}

安装vue2依赖

前提：安装vite成功后，就需要安装vue2所需要的插件：vue，vue-template-compiler

// 使用npm 
npm install vue vue-template-compiler -S

// 使用cnpm 
cnpm install vue vue-template-compiler -S

// 使用yarn 
yarn add vue vue-template-compiler -S

安装成功后就可以开始配置项目了。

修改项目文件

.
├── public                  
│   ├── favicon.ico           
├── src   
│   ├── App.vue
│   ├── main.js           // 入口文件
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js

项目结构基本搭建成功

删除src整个目录，重新新建src目录，在src目录上添加main.js，App.vue

src/main.js

import Vue from 'vue'
import App from './App.vue'
 
new Vue({
  render: h => h(App)
}).$mount('#app')

src/App.vue

<template>
  <div>Hello Vite Vue2</div>
</template>

运行项目

npm run dev					// 瞬间成功

项目中添加vue-router及vuex

安装依赖

// npm安装vue-router 和 vuex
npm install vue-router vuex -S

// yarn安装vue-router 和 vuex
yarn add vue-router vuex -S

修改文件

// 修改后文件目录结构
.
├── public									
│   ├── favicon.ico						
├── src		
│   ├── router
│   	  ├── index.js
│   ├── store
│   	  ├── index.js
│   ├── views
│   	  ├── About.vue
│   	  ├── Home.vue
│   ├── App.vue
│   ├── main.js						// 入口文件
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js

根据vue2创建目录结构创建

src/main.js 添加vue-router 和 vuex

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

src/views/About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
}
</script>

src/views/Home.vue

<template>
  <div class="home">
    This is an Home page
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

完结！撒花！

Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex）

简介