四时宝库

程序员的知识宝库

2024年10月03日

基于vite2.x搭建vue2.x项目（vue vite教程）

1、初始化项目

（1）、打开命令行终端，执行命令：npm -v。

npm为6.x版本

Bash
终端执行：npm init vite 项目目录名 --template vanilla

npm为7.x版本

Bash
终端执行：npm init vite 项目目录名 -- --template vanilla

注意：当前使用vite版本为2.x

如果npm命令不存在，请先安装node，下载安装地址：http://nodejs.cn/download/

（2）、cd 项目目录名

（3）、npm i


2、安装依赖包/插件

（1）、包：vue@2.6.14，vue2最高版本，生产依赖。通过终端输入：npm view vue versions 命令查询，地址：https://cn.vuejs.org/v2/guide/


（2）、包：vue-router@3.5.3，vue-router3最高版本，兼容vue2.x，生产依赖。通过终端输入：npm view vue-router versions 命令查询，地址：https://v3.router.vuejs.org/zh/installation.html

（3）、包：vuex@3.6.2，vuex3最高版本，兼容vue2.x，生产依赖。通过终端输入：npm view vuex versions 命令查询，地址：https://v3.vuex.vuejs.org/zh/


（4）、UI包：element-ui，兼容vue2.x，生产依赖。通过终端输入：npm view element-ui versions 命令查询，地址：https://element.eleme.cn/#/zh-CN/component/installation


（5）、工具包：dayjs，比 moment 轻量n级的日期格式库，生产依赖，地址：https://dayjs.fenxianglu.cn/category/


（6）、包：whatwg-fetch，兼容旧版浏览器IE10+，生产依赖，地址：https://github.com/github/fetch


（6）、插件：vite-plugin-vue2，提供 vue2.x 单文件组件支持的插件，开发依赖，地址：https://www.npmjs.com/package/vite-plugin-vue2


（7）、插件：@vitejs/plugin-legacy，打包出兼容传统浏览器的代码，开发依赖，地址：https://github.com/vitejs/vite/tree/main/packages/plugin-legacy


（8）、插件：unplugin-vue-components，按需导入组件，开发依赖，地址：https://github.com/antfu/unplugin-vue-components


（9）、插件：vite-plugin-pages，自动生成路由列表，开发依赖，地址：https://www.npmjs.com/package/vite-plugin-pages


（10）、包：@vue/compiler-sfc，编译 vue2.x | vue3.x 单文件组件，开发依赖，自动生成路由在配置meta时，需要依赖此包，地址：https://www.npmjs.com/package/@vue/compiler-sfc


（11）、包：vue-template-compiler@2.6.14，将 vue2.x 模板预编译为渲染函数，版本跟vue2.x版本保持一致，vite-plugin-vue2 插件依赖次包，开发依赖，地址：https://www.npmjs.com/package/vue-template-compiler


（12）、插件：vite-plugin-html，(HTML 压缩能力，EJS 模板能力，多页应用支持，支持自定义输入，支持自定义模板)，开发依赖，地址：https://github.com/vbenjs/vite-plugin-html


（13）、包：sass， CSS预处理器，开发依赖，地址：https://www.sass.hk/


生产依赖安装命令：

Bash
npm i vue@2.6.14 vue-router@3.5.3 vuex@3.6.2 element-ui dayjs whatwg-fetch


开发依赖安装命令：

Bash
npm i vite-plugin-vue2 @vitejs/plugin-legacy unplugin-vue-components vite-plugin-pages @vue/compiler-sfc vue-template-compiler@2.6.14 vite-plugin-html sass -D


3、配置vite

（1）、在项目的根目录下新建vite.config.js 文件，代码如下：

Bash
import { defineConfig } from 'vite'
import path from 'path'
import {createVuePlugin} from 'vite-plugin-vue2'
import legacyPlugin from '@vitejs/plugin-legacy'
//按需导入组件 start
import Components from 'unplugin-vue-components/vite'
import { ElementUiResolver } from 'unplugin-vue-components/resolvers'
//按需导入组件 end
import Pages from "vite-plugin-pages"
// 定义index.html文件
import { createHtmlPlugin } from 'vite-plugin-html'
const resolve = dir => path.resolve(__dirname,dir)

export default defineConfig(({command,mode}) => {
  // 开发环境 mode = development command = serve
  // 生产环境 mode = production command = build
  return {
    plugins: [
      //提供 vue2.x 单文件组件支持的插件
      createVuePlugin(),
      //打包出兼容传统浏览器的代码  
      legacyPlugin({
        targets: ['> 1%, last 2 version, ie >= 11'],
        additionalLegacyPolyfills: ['regenerator-runtime/runtime']
      }),
      //按需导入组件
      Components({
        //在此列表中的组件也会按需自动导入和注册
        dirs: ['./src/components'],
        //此UI库的组件也会自动导入和注册（element-ui对应ElementUiResolver，Naive UI对应NaiveUiResolver，vant对应VantResolver，iview对应ViewUiResolver等等）
        // 配置之后，无需在 main.js 引入 element-ui 了,想要使用element-ui 哪个组件，可直接在 template 中引入
        resolvers: [ElementUiResolver()]
      }),
      //自动生成路由列表配置，如果需要配置 name 和 meta 信息，可以在单文件组件中顶部写入 <route>{name:'',meta:{}}</route> 进行配置
      Pages({
        // 自动生成的对应目录，默认就是src/pages，所以这样可以不设置，除非需要使用别的路径
        dirs: ['src/pages'],
        // 是否动态导入组件
        importMode: path => path.includes("_async") ? "async" : "sync"
      }),
      // 定义index.html
      createHtmlPlugin({
        //是否压缩html
        minify:true,
        // 注入index.html的数据，ejs格式
        inject:{
          data:{
            title:'我是标题',
            mode:mode,
            injectScript:`<script></script>`
          }
        }
      })
    ],
    //静态资源路径改为相对路径，默认是绝对路径/
    base: "./",
    server: {
      //自动打开浏览器
      open: true,
      //正常显示当前局域网IP访问地址，如果没有配置此项，执行npm run dev后，会在终端显示：Network: use `--host` to expose
      host: "0.0.0.0",
      // api 代理
      proxy:{
        '/api':{// 将’/api‘请求转到代理请求’http://192.168.3.136:8080/api‘
          target:"http://192.168.3.136:8080",
          changeOrigin:true,
          secure:false,
          //如果不想/api被传递，需要重写路径 /api -> http://192.168.3.136:8080
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
    },
    resolve: {
      // 导入文件时，可以省略文件的后缀，默认支持js后缀，不支持vue后缀。下面配置导入文件时可省略的后缀，此配置是覆盖，非合并
      extensions: ['.vue', '.js', '.json'],
      // 配置路径别名
      alias:{
        '@':resolve('src')
      }
    }
  }
})


4、创建、修改、删除相关的文件和文件夹

（1）、在项目的根目录下创建 src 目录，在 src 目录下面创建 pages、components、router、store、api、utils、assets 等目录（可根据自己需求创建）

根据目录终端执行命令：

Bash
md src

然后

Bash
cd src

最后

Bash
md pages & md components & md router & md store & md api & md utils & md assets

（2）、删除项目根目录下的 style.css。在根目录终端执行命令:

Bash
del style.css


（3）、在项目的根目录下创建 public 目录，放置不需要编译的静态资源。根目录终端执行命令：

Bash
md public


（4）、修改项目根目录下index.html 文件，代码如下：

Bash
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%- title %></title>
    <%- injectScript %>
    <% if (mode !== 'development') { %>
    <script></script>
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>


（5）、在 src 目录下，创建 App.vue 文件，作为根组件。终端进入 src 目录，之后执行：

Bash
cd. > App.vue


（6）、将项目的根目录下的main.js放置src目录下，并修改 main.js 文件，代码如下：

Bash
// fetch方法兼容IE10+，兼容Safari6.1+，兼容Edge、Chrome、Firefox
// IE浏览器出现“XMLHttpRequest: 网络错误 0x80070005, 拒绝访问” 解决办法：https://blog.csdn.net/bozhu1/article/details/118567244
import 'whatwg-fetch'
import Vue from 'vue'
// 导入绑在vue原型上的插件
import './utils/plugin'
import App from './App.vue'
import router from "./router";
import store from './store'

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


（7）、在 utils 目录下新建 plugin.js 文件，代码如下：

Bash
import Vue from 'vue'
import Loading from 'element-ui/lib/loading'
import MessageBox from 'element-ui/lib/message-box'
import Notification from 'element-ui/lib/notification'
import Message from 'element-ui/lib/message'
import 'element-ui/lib/theme-chalk/index.css'
import dayjs from 'dayjs'

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
Vue.prototype.$date = dayjs;


（8）、在router 目录下新建index.js 文件，代码如下：

Bash
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from "~pages";
Vue.use(VueRouter)
const router = new VueRouter({routes})
export default router


（9）、在 store 目录下新建index.js 文件，代码如下：

Bash
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state:{
    count:0
  },
  getters:{
    
  },
  mutations:{
    add(state,val){
      state.count++
    }
  },
  actions:{
    
  }
})


5、运行项目

（1）、终端命令行执行 ：

Bash
npm run dev


6、打包项目、预览打包的项目

（1）、终端命令执行：

Bash
npm run build

（2）、终端命令执行：

Bash
npm run preview


7、vite全局环境变量

内置全局变量

Bash
1、import.meta.env.MODE：运行模式，通过--mode来设置

2、import.meta.env.BASE_URL：部署的公共基础路径，由config文件中的base确定

3、import.meta.env.PROD：boolean值，是否运行在生产环境

4、import.meta.env.DEV：boolean值，是否运行在开发环境(永远与import.meta.env.PROD相反)


8、经过测试兼容IE10+

标签：css转sass 

作者:sishi88 , 分类:技术教程 , 浏览:13 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接