Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex+ axios+vant）持续完善中.....

阿刁星
1,154 阅读3分钟

1、初始化 Vue2 项目

1.1、初始化项目

npm init vite@latest

完成以上面步骤后，再选择以下要新建的是什么项目即可。

这里选择 vanilla 即可，随后会追问选择 原生 的还是 ts 的，根据自己需求选择即可。

我这里会选择 原生 进行开发。

image.png image.png

项目创建成功后，会出现 3 条提示命令。

进入项目 cd vite-vue2

初始化项目 npm install

运行项目npm run dev

1.2、安装 vite 对 vue2 支持的插件

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

npm install vite-plugin-vue2 --dev

【2】要使用 vite 插件，需要在项目的根目录创建 vite.config.js 文件。

在 vite.config.js 里输入以下代码。

const { createVuePlugin } = require('vite-plugin-vue2')
module.exports = {
    plugins: [createVuePlugin( /*options*/ )],
}

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

需要注意，createVuePlugin() 是跟着括号的，是要执行的！

1.3、安装 vue 依赖

npm install vue -S 

npm install vue-template-compiler

1.4、修改项目文件依赖关系

1.4.1、创建 src 目录

在项目根目录下创建 src 目录。

然后把 main.js 移到 src 目录里。

1.4.2、修改 index.html

项目启动后，入口文件是 index.html ，而 index.html 原本引入了 main.js ，所以也要修改一下 index.html 文件的指向。

<script type="module" src="/src/main.js"></script>
1.4.3、创建 App.vue 文件
<template>  
    <div>Hello Vite Vue2 from wanghy</div> 
</template>
1.4.4、修改 src/main.js
import Vue from "vue";
import App from "./App.vue"

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

1.5、运行项目

npm run dev

1.6、打包

npm run build

二、项目常用库集成

2、安装 vue-router

2.1、安装

npm install vue-router^3.2.0

在写本文时，使用以上命令安装的 vue-router 是支持 Vue3 项目的。

所以该命令安装的 vue-router 是支持 Vue2 的话，需要自行加一个版本号来约束。

2.2 新建路由目录

2.2.1、创建路由表

在 src 目录下创建 router 目录，并在 router 目录下创建 index.js 文件。

在 src/router/index.js 输入以下代码

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

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

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

const router = new VueRouter({
  routes
})

export default router
复制代码
2.2.2、创建路由指向的页面组件

在 src 目录下创建 views 目录，用来存放页面组件。

在 src/views 目录下创建2个页面：Hello.vue 和 About.vue

Hello.vue 内容

<template>
  <div>
    hello world
  </div>
</template>
复制代码

About.vue 内容

<template>
  <div>
    About
  </div>
</template>
复制代码

2.3 全局注册

2.3.1、在 main.js 里注册
2.3.1、在 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')
复制代码

引入 router ，并且在 new Vue 时注册一下。

2.3.2 创建路由跳转标签 并 展示

修改 App.vue 文件

<template>
  <div>
    <nav>
      <router-link to="/">Hello</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>
复制代码

使用 <router-link> 标签定义跳转地址。

3、安装 vuex

3.1 安装

npm install vuex@^3.4.0 --save

使用以上命令安装的 vuex 是支持 Vue3 项目的。

该命令安装的 vuex 是支持 Vue2 的话，需要自行加一个版本号来约束。

3.2 新建vuex目录

在 src 目录下创建 store 目录，并在 store 目录下创建 index.js。

在 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: {}
})
复制代码

以上代码，在 state 里创建一个变量 count 用作计数器。

在 getters 里提供一个方法获取 count。

在 mutations 里提供一个方法修改 count。

3.3 全局注册

3.3.1 在 main.js 里注册
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')
复制代码

引入 store 并在 new Vue 时注册。

3.3.2 在 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>

4、安装 axios

4.1 安装

npm i axios --save

4.2 新建utils目录,根据业务封装Axios

在 src 目录下创建 utils 目录，并在 utils 目录下创建 request.js。

在 request.js 文件输入以下代码

import axios from 'axios'
import store from '@/store'
import { Toast } from 'vant'
// 根据环境不同引入不同api地址
import { baseApi } from '@/config'
// create an axios instance
const service = axios.create({
  baseURL: baseApi, // url = base api url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request拦截器 request interceptor
service.interceptors.request.use(
  config => {
    // 不传递默认开启loading
    if (!config.hideloading) {
      // loading
      Toast.loading({
        forbidClick: true
      })
    }
    if (store.getters.token) {
      config.headers['X-Token'] = ''
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// respone拦截器
service.interceptors.response.use(
  response => {
    Toast.clear()
    const res = response.data
    if (res.status && res.status !== 200) {
      // 登录超时,重新登录
      if (res.status === 401) {
        store.dispatch('FedLogOut').then(() => {
          location.reload()
        })
      }
      return Promise.reject(res || 'error')
    } else {
      return Promise.resolve(res)
    }
  },
  error => {
    Toast.clear()
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

4.3 使用

在 src 目录下创建 api 目录，并在 api 目录下创建 base.js, home.js[业务请求文件，可按模块划分，根据实际情况自己决定]。 在base.js文件里只做请求地址显示，例如

const api = {
    Login: '/user/login',  //后端接口路径
    UserInfo: '/user/userinfo', //后端接口路径
    UserName: '/user/name' //后端接口路径
  }
  
  export default api

在home.js 做对应业务处理，示例如下：

import api from './base'
// axios
import request from '@/utils/request'

// 登录
export function login(data) {
    return request({
      url: api.Login,
      method: 'post',
      data
    })
  }

5、安装 vant

5.1 安装

npm i vant --save

5.2 新建plugins目录,做外部组件统一处理

在 src 目录下创建 plugins 目录，并在 plugins 目录下创建 vant.js。

在 vant.js 文件输入以下代码

// 按需全局引入 vant组件
import Vue from 'vue'
import { Button, List, Cell, Tabbar, TabbarItem } from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Tabbar).use(TabbarItem)

5.3 全局注册

5.3.1 在 main.js 里注册
import Vue from "vue";
import App from "./App.vue"
import router from './router/index.js'
import store from './store'
// 全局引入按需引入UI库 vant
import '@/plugins/vant'
new Vue({
    el: "#app",
    router,
    store,
    render: (h) => h(App)
}).$mount();

7 小常识包安装注意事项

7.1生产依赖 dependencies
Copy
npm i package-name --save
或
npm i package-name -S
7.2开发依赖 devDependencies

npm i package-name --save-dev
或
npm i package-name -D

6、移动端屏幕适配

postcss-px-to-viewport

6.1.开发环境 npm 安装插件

npm install postcss-px-to-viewport --save-dev

6.2.项目根目录添加配置文件

根目录建postcss.config.js 配置如下：重新运行项目就可以了

module.exports = {
    plugins: {
      'postcss-px-to-viewport': {
        unitToConvert: 'px', // 需要转换的单位，默认为"px"
        viewportWidth: 375, // 设计稿的视口宽度
        unitPrecision: 5, // 单位转换后保留的精度
        propList: ['*'], // 能转化为vw的属性列表
        viewportUnit: 'vw', // 希望使用的视口单位
        fontViewportUnit: 'vw', // 字体使用的视口单位
        selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
        minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
        mediaQuery: false, // 媒体查询里的单位是否需要转换单位
        replace: true, //  是否直接更换属性值，而不添加备用属性
        exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
        include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
        landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
        landscapeUnit: 'vw', // 横屏时使用的单位
        landscapeWidth: 375 // 横屏时使用的视口宽度
      }
    }
  }

7、参考

Vite 官方文档

Vite 支持 Vue2 的插件：vite-plugin-vue2 文档

github.com/byoungd/vit…

github.com/artskin/adm…

vite常用插件:juejin.cn/post/699374…

avatar
文章
阅读
粉丝