使用Vite安装并初始化Vue2 + pinia + vue-router项目

使用vite创建项目

使用 npm create vite 命令先创建项目，选择框架时选择 Vanilla。
这里不选择vue是因为vite的vue默认版本位vue3 。
为避免重复卸载包，所以选择vanilla vite给出的选项对应如下：

vanilla
vue
react
preact
lit
svelte

vite cli的选择
在这里插入图片描述

安装依赖

vite给出了接下来操作的提示，需要npm install 安装所有的依赖包，这些包都包含在package.json中，执行npm install 会读取其中的信息，自己使用npm install 也会将对应信息加入到package.json文件中。

本项目会用到vue2、pinia、vue-router三个包，首先安装vue2的包

npm install vue@2 -D

这里-D的意思是写入 package.json 文件中的 “devDependencies” 关键字下，package.json有"devDependencies"和"dependencies" 关键字，两者的区别是在生产环境下只下载安装 “dependencies” 内的包，开发环境下两个关键字中的包都会安装。（不加-D 就会安装到 “dependencies” 中)
这里我将vue2安装到了"devDependencies"中，是希望在生产环境下可以通过cdn的方法减少项目加载时间，但这点安装到哪里都无所谓。


//此时package.json的配置

{
  "name": "vue2pinia",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^4.0.0",
    "vue": "^2.7.14"
  }
}

其次安装pinia，pinia作为状态管理工具，对vue的版本没那么敏感，直接安装最新版

npm install pinia

然后安装vue-router，vue-router4.0后的版本只适合vue3，对于vue2的项目只能使用vue-router3.0及以前的版本

npm install vue-router@3

对于本项目我还想使用less作为css的预处理语言，所以还需要安装less预处理器

npm install less -D

此时package.json文件如下所示

{
  "name": "vue2pinia",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^4.0.0",
    "vue": "^2.7.14",
    "less": "^4.1.3"
  },
  "dependencies": {
    "pinia": "^2.0.29",
    "vue-router": "^3.6.5"
  }
}

我们开始渐进式的开始初始化整个项目

使用vue2

我们开始创建src文件夹，初始化main.js， App.vue 这些文件：

//main.js
import Vue from 'vue'

var vm = new Vue({
  el:'#app',
})

//App.vue
<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="../public/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="../public/javascript.svg" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>你好 Vite!</h1>
    <div class="card">
      <button id="counter" type="button" @click="counter+=1">count is {{counter}}</button>
    </div>
    <p class="read-the-docs">
      点击Vite图标了解更多
    </p>
  </div>
</template>
<script>
  export default {
    data: {
      counter: 0
    }
  }
</script>
<style lang="less">
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;

  .vanilla:hover {
    filter: drop-shadow(0 0 2em #f7df1eaa);
  }

  &:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
}

.card {
  padding: 2em;

  .read-the-docs {
    color: #888;
  }

  button {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.25s;

    &:hover {
      border-color: #646cff;
    }

    &:focus,
    button:focus-visible {
      outline: 4px auto -webkit-focus-ring-color;
    }
  }
}
</style>

在终端输入npm run dev之后不出意外的报错了，此时的vite并不知道要开始编译vue的文件了，我们需要在根目录下创建vite.config.js文件配置vite。
在此之前先安装vite对vue2的支持

npm install vite-plugin-vue2 -D

虽然这个包明面上不支持 2.7以上的版本，但实际上使用官方推荐的 @vitejs/plugin-vue2 一直报错，但也有可能是我不太了解的原因。
安装完成后配置vite.config.js

import { defineConfig } from 'vite'
import { createVuePlugin } from "vite-plugin-vue2";

export default defineConfig({
  plugins: [createVuePlugin()],
})

之后就可以运行了。现子贴上完整的package.json的代码

{
  "name": "vue2pinia",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "less": "^4.1.3",
    "vite": "^4.0.0",
    "vite-plugin-vue2": "^2.0.3",
    "vue": "^2.7.14"
  },
  "dependencies": {
    "pinia": "^2.0.29",
    "vue-router": "^3.6.5"
  }
}

应用pinia

实验中。。。

应用vue-router

实验中。。。