1、项目搭建

输入命令：

yarn create vite

再输入项目名称如:vite-vue2

然后选择：vanilla framework，选择vanilla variant；

提示：

用vscode打开刚刚创建的vite-vue2的项目；结构如下：

几乎是一个空项目，我们可以先安装依赖，然后启动下看看：

yarn

安装完后会出现node_modules目录

打开terminal输入npm run dev；

npm run dev

出现下图，说明项目已经跑起来了。

接下来我们把vue2.0的相关依赖安装进来。

1.2 安装vue2.0相关依赖

安装vite-plugin-vue2

yarn add vite-plugin-vue2

会在package.json文件增加对应的依赖

依赖安装好后，使用vite插件需要在根目录新建vite.config.js 输入代码：

//引入vite-plugin-vue2插件
import { createVuePlugin } from 'vite-plugin-vue2'
//并用 `Vite` 提供的插件注册方法来注册
export default {
  plugins: [createVuePlugin()]
}

安装vue2.0的相关依赖。

yarn add vue 
yarn add vue-template-compiler

package.json里面新增了两个依赖

根目录新增一个src目录，并把main.js移入到src里面，顺便把index.html的js路径改成src目录的main.js；

在src目录下新建一个App.vue，输入如下内容:

<template>
  <div>vite-vue2-test</div>
</template>

把main.js的内容改成：

import Vue from 'vue'
import App from './App.vue'

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

环境改造已经完成接下来跑起来试试。

npm run dev

打开浏览器：

说明已经跑起来了。

1.3、加入vue-router

yarn add vue-router

1.3.1新建路由。

在src目录下新建router目录，并在里面新建index.js文件。输入：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../pages/home.vue' // 引入 Home页面组件

// 注册路由插件
Vue.use(VueRouter)

// 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/detail',
    name: 'Detail',
    component: () => import('../pages/detail.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

修改App.vue文件

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/detail">detail</router-link>
    </nav>
    <router-view />
  </div>
</template>

修改main.js文件,全局注册路由。

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

在src下新增pages文件夹

新建两个文件分别为detail.vue和home.vue；写入简单的代码

此时浏览器的内容会变成

1.3.2 加入vuex --store

yarn add vuex

在src下新建store目录，并在store里面新建index.js，输入：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    count(state) {
      return state.count
    }
  },
  mutations: {
    addCount(state, num) {
      state.count += num
    }
  },
  actions: {}
})

在main.js注册store

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')

试着在home.vue里面使用store,修改home.vue为如下代码

<template>
  <div>
    <h1>Home</h1>
    <div>count: {{ count }}</div>
    <button @click="addCount">+1</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.count;
    },
  },
  methods: {
    addCount() {
      this.$store.commit("addCount", 1);
    },
  },
};
</script>

到此完成了，基本的项目搭建。

2、整合自己的项目恒河沙到vite里面。

2.1、jsx问题

在field.js里面有jsx语法。

方案1（推荐）：在vite.config.js里面加入：

esbuild: {
        jsxFactory: "h",
    },

把field.js文件名称改成field.jsx,包含jsx语法的vue文件的script标签增加lang="jsx";

如果不想用esbuild，可以在plugins把

改成：

也是可以的。

2.2、 @ 路径别名问题 -resolve.alias

2.3、 less变量和less问题-css.preprocessorOptions

2.4、沈略的扩展名问题-extensions

2.5、代理问题。server。

2.6、安装brick，elementUI，饿了么的字体文件(element-icons.woff,element-icons.ttf)找不到问题。

如果没有手动引入element的css会找不到字体文件

先在main.js里面引入elementUI的css

import 'element-ui/lib/theme-chalk/index.css';

但是标准版项目需要用brick的样式，所以再下面再引入brick的style

import 'element-ui/lib/theme-chalk/index.css';
import '@heisea/brick/lib/style/theme/hsa/index.css';

2.7、部分用到less变量（--image-path-base）的图片url找不到的问题。

variables.less里面找到下面的代码。

@--image-path-base: '~@/images';

旧项目中的~@/--image--path-base改成

@--image-path-base: '@/images';

3 还是用原来的webpack打包

文件名和script标签改变后需要修改，webpack配置。

1.webpack的babel-loader添加jsx后缀的支持。

修改build目录下的webpack.base.js这两份文件中的babel-loader的test正则表达式和resolve.extensions(添加jsx后缀)如下：

图片.png

vite-vue2项目搭建与webpack项目升级到vite