vite搭建Vue3.0项目尝试

开始

最近项目不太紧张，终于可以尝试上手3.0了，
附上3.0链接:
Vue3.0.
Vitejs
Vue Router

项目搭建

vite开始文档已经很清晰了我就不细说了

// 安装vitejs
npm init @vitejs/app
// 新建项目
npm init @vitejs/app my-vue-app --template vue
// 然后老一套
cd my-vue-app
npm install
npm run dev

添加Vue Router 4 路由

npm install vue-router@4

vue2.0到3.0的区别来了
文档说了很详细链接：VueRouter 区别
new Router 变成 createRouter
"history": createWebHistory()
"hash": createWebHashHistory()
"abstract": createMemoryHistory()
删除 router-link中的 append 属性

router/index.js

import { createRouter, createWebHistory } from "vue-router";
// createWebHashHistory 正常模式 ;createWebHistory  不带 #号
// hash 与 history
const about = () => import("../views/about.vue")
const index = () => import("../views/index.vue")

const routes = [
    { path: "/", name: "index", component: index },
    {
        path: "/about",
        name: "about",
        component: about
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})
export default  router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import router from './router/index.js'
import 'element-plus/lib/theme-chalk/index.css';

import './index.css'

// 这里注意这样方便
const app = createApp(App) 
app.use(router)
app.use(ElementPlus)
app.mount('#app')

运行完事

axios 网络请求，vite项目环境变量与模式

.env 环境变量 看文档设置

开发环境

# just a flag
ENV = 'development'
# base api
VITE_APP_BASE_API = "你的请求地址'

VITE_APP_TITLE = '-开发环境'

生产也一样
request.js

import axios from 'axios'
import { ElMessage } from 'element-plus';
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 100000 // request timeout
})
console.log(import.meta.env.VITE_APP_TITLE)
console.log(import.meta.env.VITE_APP_BASE_API)
// request interceptor
// 请求前的拦截
service.interceptors.request.use(
  config => {
    //登陆后请求加token
    // 路由上加页面权限，忽略

    // if (!(config.data && config.data.company_id) && (store.getters.CellID && config.data)) {
    //   config.data.company_id = store.getters.CellID
    // }
    // if (store.getters.token) {
    // config.headers['Authorization'] = getToken()
    // }
    return config
  },
  error => {
    // do something with request error
    return Promise.reject(error)
  }
)


service.interceptors.response.use(
  response => {
    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (response.status !== 200) {
      ElMessage({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      return Promise.reject(new Error(res.msg || 'Error'))
    } else {
      return res
    }
  },
  error => {
    // 与公司后端对接错误，规定错误等
    ElMessage({
      message: '网络错误',
      type: 'error',
      duration: 5 * 1000
    })
  }

)

export default service

user.js

import request from '../utils/request'

export function login(data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

import { login } from '../api/user.js'
test(){
   login({}).then(res =>{
    console.log(res)
  })
}

vite 配置项

有点难，我也没搞懂，只能边看文档边丰富

// import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
// https://vitejs.dev/config/
export default {
  // 要用到的插件数组
  plugins: [vue()],
  // 开发或生产环境服务的公共基础路径,可以是/foo/、https://foo.com/、空字符串或./(用于开发环境) 几种类型，这个选项也可以通过命令行参数指定（例：vite build --base=/my/public/path/）
  base: './',
  // 静态资源服务的文件夹, 默认"public"
  publicDir: 'public',
  resolve: {
    alias:{
      '/@/': path.resolve(__dirname, './src')//设置别名
    }
  },
  server: {
    // 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"
    host: '0.0.0.0',
    // 服务器端口号
    port: 3000,
    // boolean | string 启动项目时自动在浏览器打开应用程序；如果为string，比如"/index.html"，会打开http://localhost:3000/index.html
    open: false,
    // 自定义代理规则
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    // 指定输出路径，默认'dist'
    outDir: 'dist',
    // 指定生成静态资源的存放路径(相对于build.outDir)
    assetsDir: 'assets',
    // 小于此阈值的导入或引用资源将内联为base64编码，设置为0可禁用此项。默认4096（4kb）
    assetsInlineLimit: '4096',
    // 启用/禁用CSS代码拆分，如果禁用，整个项目的所有CSS将被提取到一个CSS文件中,默认true
    cssCodeSplit: true,
    // 构建后是否生成source map文件，默认false
    sourcemap: false,
    // 为true时，会生成manifest.json文件，用于后端集成
    manifest: false
  }
}

先搞这些，需求又来了，以后再更新

21.03.30