开始
最近项目不太紧张,终于可以尝试上手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