一、项目搭建

returnfalse
301 阅读5分钟

vue3+TS+Vite+Vuex4+VueRoute 基本项目搭建

注意：暂不包含vuex，后续将继续添加完善

搭建准备

  • 在开发之前，你需要确定你的脚手架 vue-cli 的版本在3.x以上

    1679049242421.jpg

  • 如果版本不能达到要求，则重新安装 vue-cli

npm install -g @vue/cli

创建项目

vue3 创建项目的时候有两种方式（官方推荐的 vite / webpack），本文介绍使用vite创建项目

  • 打开命令工具
npm init @vitejs/app vue-template-ts --template vue-ts

运行结果如下图

image.png

输入y运行结果如下图

image.png 依次选择vue回车 然后选择vue-ts回车，运行结果如下图

image.png 至此一个vite + vue + ts 的项目就创建完成了 接下来运行项目，让项目跑起来

image.png

环境变量配置

创建环境变量文件及配置
  • 在cli项目中我们可以是配置.env.[mode]文件来配置环境变量
  • 在根目录下创建 .env.development 和 .env.production 两个文件,不同文件内容如下
# .env.development
APP_ENV = 'development'
VITE_APP_TITLE= 'vite_project'
VITE_REQUEST_BASE_URL= 'www.xxx.com'

# .env.production
APP_ENV = 'production'
VITE_APP_TITLE= 'vite_project'
VITE_REQUEST_BASE_URL= 'www.xxx.com'
  • 修改根目录下package.json 文件, 新增了运行命令指定使用不同的mode，用于覆盖默认的模式
  • 例：development会将上面新建的 .env.development打包
  • 因此在代码中可以获取不同的环境变量。
{
...
"scripts": {
    "dev": "vite --mode development",
    "build": "vue-tsc --noEmit && vite build --mode production",
    "preview": "vite preview"
},
...
}
代码中获取环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量

// 写在main.ts 文件中
const env = import.meta.env
console.log(env)

/* 打印如下值
{
    "VITE_APP_TITLE":"vite_admin", // 配置文件定义的值
    "VITE_REQUEST_BASE_URL":"www.xxx.com", // 配置文件定义的值
    "BASE_URL":"/",
    "MODE":"development", // 运行的环境 development or production
    "DEV":true, // 是否是开发环境
    "PROD":false, // 是否是生产环境
    "SSR":false
}
*/
// APP_ENV为何没有打印呢：
为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

更多关于vite的详细配置点击查看：vite环境变量和模式

项目中的 vite.config.ts 配置

先解决 直接使用require会提示错误 问题

// 二选一

// 1. 命令行安装`@types/node`
npm i --save-dev @types/node

// 2. tsconfig.json中添加代码
{
 "compilerOptions": {
     ...
     "types": ["vite/client", "node],
     ...
 }
}

然后将下面文件复制替换项目中的配置，重新运行项目 npm run dev

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default ({ command, mode }) => {
  // let config = {}
  // if (command === 'serve') { // dev 独有配置 } else { // build 独有配置 // command === 'build' }

  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return defineConfig({
    root: process.cwd(), // 项目根目录（index.html 文件所在的位置）。可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。

    // 开发或生产环境服务的公共基础路径。合法的值包括以下几种：
    // 绝对 URL 路径名，例如 /foo/
    // 完整的 URL，例如 https://foo.com/
    // 空字符串或 ./（用于嵌入形式的开发）
    base: '/',

    // 默认： 'development' 用于开发，'production' 用于构建
    // 在配置中指明将会把 serve 和 build 时的模式 都 覆盖掉。也可以通过命令行 --mode 选项来重写。
    mode: 'development',
    publicDir: 'public', // 打包输出到文件夹， 将 publicDir 设定为 false 可以关闭此项功能。
    
    // 被监听的包必须被排除在优化之外，
    // 以便它能出现在依赖关系图中并触发热更新。
    // optimizeDeps: {
    //   exclude: ['vuex']
    // },
    
    plugins: [vue()],

    //服务器配置
    server: {
      host: "0.0.0.0",
      port: 8088,// Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
      strictPort: true, // 端口被占用直接退出
      https: false,
      open: true, // 在开发服务器启动时自动在浏览器中打开应用程序
      //代理配置
      proxy: {
        "/api": {
          target: loadEnv(mode, process.cwd()).VITE_APP_BASE_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
      hmr: {
        overlay: false, // 屏蔽服务器报错
      },
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'), //配置@路径
      }
    },
    css: {
      // css预处理器
      preprocessorOptions: {
        // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
        // 给导入的路径最后加上 ;
        // scss: {
          // additionalData: '@import "@/assets/styles/global.scss";',
        // },
      },
    },
    build: {
      chunkSizeWarningLimit: 1500, // 分块打包，分解块，将大块分解成更小的块
      // 构建后是否生成 source map 文件。如果为 true，将会创建一个独立的 source map 文件。如果为 'inline'，source map 将作为一个 data URI 附加在输出文件中。'hidden' 的工作原理与 'true' 相似，只是 bundle 文件中相应的注释将不被保留。
      sourcemap: false, // boolean | 'inline' | 'hidden'  
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes("node_modules")) {
              return id
                .toString()
                .split("node_modules/")[1]
                .split("/")[0]
                .toString();
            }
          },
        },
      },
    },
  })
}

更多详细信息点击查看：vite配置文档

添加 vue-router4

安装路由

npm i vue-router@4

新建文件

依次创建如下文件

image.png

  • 首先来看一下index.ts 如何编写
// router/index.ts

import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw, RouterHistory } from 'vue-router'
// 不做依次引入路由模块，这里直接获取文件进行遍历生成路由模块配置
const modules = import.meta.globEager('./modules/*.ts')
const allRouter: RouteRecordRaw[] = []
for (const path in modules) {
  if (!!modules[path].default) {
    modules[path].default.forEach((item: RouteRecordRaw) => {
      allRouter.push(item)
    });
  }
}
// const history: RouterHistory = createWebHistory()  // history 模式
const history: RouterHistory = createWebHashHistory()  // hash 模式
const routes: Array<RouteRecordRaw> = [
  ...allRouter,
]
console.log('routes=>', routes)

const router = createRouter({
  history,
  routes,
})
export default router
  • modules/*.ts中导出不同路由的配置
// router/modules/*.ts

export default [

]
  • 将vue-router 挂载到vue的实例上
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
// 挂载路由
app.use(router)
app.mount('#app')
  • 添加第一个路由跳转页面
// App.vue 添加 router-view 标签

<template>
  <router-view></router-view>
</template>
<script setup lang="ts"></script>
<style></style>

在src下新建一个views 文件夹，用来存放页面文件

// views/index/index.vue
<template>
  <div>ref: {{ str }}</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const str = ref<String>("书婷，出门小心车");
</script>

<style lang="scss" scoped></style>

添加路由

...
const routes: Array<RouteRecordRaw> = [
  // 新增路由
  {
    path: '/',
    name: 'index',
    component: () => import('@/views/index/index.vue'),
  },
  ...allRouter,
]
...
  • 详细文档点击查看： Vue Router官方文档
  • 重新运行项目npm run dev 就能看到项目中显示的页面了

添加scss

安装scss

npm install sass --save-dev
npm install sass-loader --save-dev
npm install node-sass --save-dev
npm install vue-style-loader --sava-dev
  • node-sass安装失败的解决方法
  • 由于众所周知的国内网络环境，从国内安装官方源的依赖包会很慢。可以将npm源设置成淘宝npm(如淘宝npm)
npm install -g cnpm --registry=https://registry.npmmirror.com

// 安装完成后使用
cnpm install node-sass --save-dev

全局配置

  • 新建一个文件 assets/styles/global.scss
// assets/styles/global.scss
$color: red;

接下来将文件变成全局的global.scss，让接下来的scss文件中都能使用global.scss中的变量

// 上面讲到的 [项目中的 vite.config.ts 配置]
// vite.config.ts
...
css: {
    // css预处理器
    preprocessorOptions: {
        // 引入 global.scss 这样就可以在全局中使用 global.scss中预定义的变量了
        // 给导入的路径最后加上 ;
        scss: {
          additionalData: '@import "@/assets/styles/global.scss";',
        },
    },
}
...

如下图所示，全局scss配置已生效，接下来就能在global.scss中定义项目的各种css变量了

image.png

avatar
文章
阅读
粉丝