使用vite创建vue3项目模板

Posted 2021-09-06 嘴巴嘟嘟

当你想独立创建一个vue项目的时候，并且无从下手的情况下，那么这么项目可以很好的解决此问题，里面包含了基本的工程目录，按文件夹分类并且提高效率。

那么开始创建我们的项目吧！
我们使用vite来创建，创建项目速度比较快

npm install -g create-vite-app //安装全局create-vite-app
create-vite-app vue3-vite   //使用工具create-vite-app创建项目名为vue3-vite的vue3项目
cd vue3-vite             //进入项目文件夹
npm install                 //初始化项目
npm run dev                 //运行项目

此时只是一个 vue3项目 ，如果需要其他自行下载并配置，此时的项目没有灵魂,我们需要配置一些东西


接下来我们需要下载组件

1. 安装vue-router

yarn add vue-router@4.0.0-beta.6

2. 配置vue-router
   在项目src目录下面新建router目录，然后添加index.js文件，添加以下内容

import { createRouter, createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'

/* async */
export const constantRouterMap = [
  { path: '/:catchAll(.*)', redirect: '/404' },
  {
    path: '/404', name: 'error404',
    meta: {
      title: 'Error 404'
    },
    component: () => import( /* webpackChunkName: "error404" */ "../views/errorPage/404.vue")
  },
]

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    children:[
      {
        path: "/Index",
        name: "index",
        component: () => import('../views/Index.vue')
      },
    ]
  },

  ...constantRouterMap
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;
//在main.js中进行引入，并进行挂载注册到全局上

路由的基本使用规则 我们可以测试是否跳转路由，vue路由的教程

接下来我们继续安装vuex

       yarn add vuex@4.0.0-beta.4
       //或者
       yarn add vuex@next

配置vuex
在项目src目录下面新建store目录，并添加index.ts文件，添加以下内容

安装axios

yarn add axios

配置axios

import { createStore } from 'vuex'

export default createStore({
  state: {
    examine: null,
  },
  mutations: {
  },
  actions: {},
  modules: {}
})

配置好文件之后，如果你想要学习使用vuex 这里有教程 vuex的使用教程

如果想使用接口的话 我们继续安装 axios

yard add axios

我们需要完整版胚子axios 方面项目以各个界面调用接口很方便，模块化开发的好处，
我们需要在这三个地方配置一下请求和调用接口

首先是 config,js 这个配置为了后期直接写接口，不用为接口切换而烦恼

window.configs={
  'baseApi':"xxx",
}

接下来是 request.js , 全局处理 请求响应和请求拦截问题

import axios from 'axios'

const service = axios({
  baseURL:window.configs.baseApi,
  timeout:5000*60
})
service.interceptors.request.use(
  config => {
    config.headers['chainType'] = getChainType();

    config.headers['address'] = localStorage.getItem('connected_account');
    return config;
  },
  error => {
    return Promise.reject();
  }
);

service.interceptors.response.use(
  response => {
    if (response.status === 200) {
      let { data } = response;
      if (data.code === 500) {
       
      }
      return response.data;
    } else {
      Promise.reject();
    }
  },
  error => {
    if (error.code == 4001) {
    
    }
    return Promise.reject();
  }
);

export default service;

最后是api/request.js 前面个两个文件配置好，我们就可以使用接口，每个接口分开调用

import axios from 'axios'
import request from 'utils/request';
axios.defaults.timeout = 20000;

// 自定义方法
const doPost= (data) => {
  return request({
    url:"bbb",
    method:'post',
    data
  })
}
const doGet= (params) => {
  return request({
    url:"bbb",
    method:'get',
    params
  })
}
// 上传文件
const doImg = (data) => {
  return request({
    url: 'file/cccc',
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data' },
    data
  });
};

export {
  doGet,doPost,doImg
}

此时 我们 aixos 配置结束，
最后是配置我们的vite.config.js

import vue from '@vitejs/plugin-vue'
const path = require('path')

// vite.config.js # or vite.config.ts
console.log(path.resolve(__dirname, './src'))
module.exports = {
  plugins: [vue()],
  "resolve.alias": {
    // 键必须以斜线开始和结束
    '/@/': path.resolve(__dirname, './src'),
    "/@utils/": path.resolve(__dirname, "src/utils"),
    "/@api/": path.resolve(__dirname, "src/api"),
    "/@components/": path.resolve(__dirname, "src/components"),
  },

  // 打包后静态资源 js/css/image 存放目录，@default '_assets'
  assetsDir: '',

  //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: "assets",
  //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
  filenameHashing: false,

  // 引入第三方的配置
  /* optimizeDeps: {
    include: ['moment', 'axios'],
  }, */
  hostname: '127.0.0.1',
  port: 3000,
  // 是否自动在浏览器打开
  open: true,
  // 是否开启 https
  https: false,
  // 服务端渲染
  ssr: false,
  /**
   * 在生产中服务时的基本公共路径。
   * @default '/'
   */
  base: './',
  /**
   * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
   * @default 'dist'
   */
  outDir: 'dist',
  // 反向代理，此处应该特别注意，网上很多教程是直接设置proxy，并没有向官网那样添加 server，可能会导致失败，vite官网：https://vitejs.dev/guide/features.html#async-chunk-loading-optimization
  server: {
    proxy: {
      '/api': {
        target: 'xxx',
        ws: true, // 是否启用websockets
        //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        changeOrigin: true,
        rewrite: path => path.replace(/^\\/api/, '')
      }
    }
  }

}