Vue3
版本
项目
创建
npm init vite 项目名称
依赖
npm i element-plus
npm i axios
npm i vue-router@4
npm i vuex@next
npm i sass -D
npm i vite-plugin-html -D
环境区分
"scripts" : {
"dev" : "vite --mode test" ,
"dev1" : "vite --mode production" ,
"build" : "vite build --mode test" ,
"build1" : "vite build --mode production"
}
package.json 同级
.env.test
NODE_ENV = "test"
VITE_APP_TITLE = "测试"
VITE_APP_BASE_API = "test"
NODE_ENV = "production"
VITE_APP_TITLE = "生产"
VITE_APP_BASE_API = "production"
import {
defineConfig, loadEnv } from "vite" ;
import vue from "@vitejs/plugin-vue" ;
import {
createHtmlPlugin } from "vite-plugin-html" ;
import {
resolve } from "path" ;
export default defineConfig ( ( {
mode, command } ) => {
const env = loadEnv ( mode, process. cwd ( ) , "" ) ;
return {
plugins : [
vue ( ) ,
createHtmlPlugin ( {
inject : {
data : {
title : env. VITE_APP_TITLE ,
} ,
} ,
} ) ,
] ,
resolve : {
alias : {
"@" : resolve ( __dirname, "src" ) ,
} ,
} ,
base : "./" ,
server : {
port : 4000 ,
open : true ,
cors : true ,
} ,
} ;
} ) ;
< title> <%= title %></ title>
axios
import axios from "axios" ;
let service = axios. create ( {
baseURL : import . meta. env. VITE_APP_BASE_API ,
timeout : 100000 ,
headers : {
"Content-Type" : "application/json;charset=UTF-8" ,
} ,
} ) ;
service. interceptors. request. use (
function ( config ) {
let token = localStorage. getItem ( "token" ) ;
if ( token) {
config. headers. authorization = token;
}
return config;
} ,
function ( error ) {
return Promise. reject ( error) ;
}
) ;
service. interceptors. response. use (
function ( response ) {
return response. data;
} ,
function ( error ) {
return Promise. reject ( error) ;
}
) ;
export default service;
import request from "./index" ;
export async function Ceshi ( params ) {
return request ( {
url : "/topics" ,
method : "GET" ,
params,
} ) ;
}
export async function Ceshi2 ( data ) {
return request ( {
url : "/Storage/GetStorageLack" ,
method : "POST" ,
data,
} ) ;
}
< script setup>
import {
Ceshi} from '@/http/api.js'
var a = await Ceshi ( )
console. log ( a) ;
< / script>
store
import {
createStore } from "vuex" ;
const defaultState = {
count : 0 ,
} ;
export default createStore ( {
state ( ) {
return defaultState;
}
} ) ;
import {
useStore} from 'vuex'
console. log ( useStore ( ) . state. count) ;
router
import {
createRouter, createWebHashHistory } from "vue-router" ;
const routes = [
{
path : "/" ,
name : "Home" ,
component : ( ) => import ( "@/views/a.vue" ) ,
} ,
] ;
const router = createRouter ( {
history : createWebHashHistory ( ) ,
routes,
} ) ;
export default router;
< suspense>
< router- view> < / router- view>
< / suspense>
main.js
import {
createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store/index'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp ( App) . use ( router) . use ( store) . use ( ElementPlus) . mount ( '#app' )
sass
.ddd{
span{
color: red;
}
}