阅读 321

vue3 + vite + vant + typescript项目搭建——工作记录

提示:确保自己的node版本 >= 12.0.0, 在命令行执行node-v就可以查看node版本

一、搭建项目

使用npm: npm init @vitejs/app project-name project-name是项目名

使用yarn:yarn create @vitejs/app project-name project-name是项目名

二、配置vite.config.ts

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import path from "path"


// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue()],

  base"./",

  resolve: {

    alias: {

      // 如果报错__dirname找不到,需要安装node,执行npm install @types/node --save-dev

      "@": path.resolve(__dirname, "./src"),

      "@assets": path.resolve(__dirname, "./src/assets"),

      "@components": path.resolve(__dirname, "./src/components"),

      "@views": path.resolve(__dirname, "./src/views"),

      "@store": path.resolve(__dirname, "./src/store"),

    },

  },

  build: {

    outDir"dist",

  },

  server: {

    httpsfalse// 是否开启 https

    openfalse// 是否自动在浏览器打开

    port8001// 端口号

    host"0.0.0.0",

    proxy: {

      "/api": {

        target""// 后台接口

        changeOrigintrue,

        securefalse// 如果是https接口,需要配置这个参数

        // ws: true, //websocket支持

        rewrite(path) => path.replace(/^\/api/""),

      },

    },

  },

  // 引入第三方的配置

  optimizeDeps: {

    include: [],

  },

})
复制代码

三、安装需要的组件库

  1. 安装vant
  • npm: npm i vant@next -S
  • yarn: yarn add vant@next

2.安装vue-rouer

  • npm init vue-router@next -S
  • yarn add vue-router@next

3.安装vuex

  • npm init vuex@next -S
  • yarn add vuex@next
文章分类
前端
文章标签