1.初始化项目

1.1创建项目

npm init vite@2 

 

1.2创建vite.config.js文件

说明：创建vite.config.js文件后，安装vite-plugin-vue2包。

 npm install vite-plugin-vue2@1.9.3 -D    

import {createVuePlugin} from "vite-plugin-vue2"


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

1.3安装vue2

说明：这里默认vue2版本安装的是2.7.15版本。

 npm i vue@2 

同时安装对应的vue-template-compiler依赖保持一致。

npm i vue-template-compiler@2.7.15 -S 

 

1.4改变文件结构

说明：创建了src文件夹。src文件夹有App.vue和main.js文件。

import Vue from "vue"
import App from "./App.vue"

new Vue({
  el:"#app",
  render:(h)=>h(App)
}).$mount();

<template>
    <div>
    Hello vue2 project
    </div>
</template>

1.5成功

 

2.第三方创建vue2项目

GitHub - vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js

3.vue-router

3.1安装路由依赖

npm install vue-router@3.5.2 -S

 

3.2创建router文件夹

说明：在router路由文件中创建index.js

// import {module} from "./module/index"

import VueRouter  from "vue-router"

import Vue from "vue"

// 使用VueRouter
Vue.use(VueRouter)

const routes=[
    {
        path:"/",
        meta:{title:"首页"},
        component:()=>import("../views/home/index.vue")
    }
]

const router=new VueRouter({
    mode:"history",
    base:"/",
    routes
})

export default router

3.3创建views文件夹 

说明：在views路由文件中创建home.vue。

<template>
    <div>
        我是首页
    </div>
</template>

<script>
export default {
    name: 'Index.vue',

   
};
</script>

<style scoped>

</style>

3.4main.js

说明： 在main.js中将路由添加到vue实例中。

import Vue from "vue"
import App from "./App.vue"

import router from "./router/index.js"

new Vue({
  el:"#app",
  router,
  render:(h)=>h(App)
}).$mount();

3.5App.vue

说明：添加router-view。

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

3.6显示

3.7 创建store文件夹

说明：npm install vuex@3.6.2 与npm install vuex@3.6.2  -S 是一样的效果。

npm install vuex@3.6.2  

3.7.1 创建index.js文件

import Vue  from "vue";
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        msg:"Hello"
    },
    mutations:{},
    actions:{

    }
})

3.7.2 引入

import Vue from "vue"
import App from "./App.vue"

import router from "./router/index.js"

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

3.7.3页面 

<template>
    <div>
     {{ this.$store.state.msg }}   我是首页
    </div>
</template>

<script>

export default {
    name: 'Index.vue',

   
};
</script>

<style scoped>

</style>

3.7.4结果