# vite+vue3
**Repository Path**: freeskyala/vite-vue3
## Basic Information
- **Project Name**: vite+vue3
- **Description**: vite+vue3 (没有TS) + vue-router+vuex+axios+scss 基础版本
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 3
- **Created**: 2022-07-20
- **Last Updated**: 2022-07-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# vite+vue3项目搭建
### 1.vite搭建
`npm init vite@latest` 选择vue 或 直接`npm init vite@latest my-vue-app --template vue`
### 2.运行vite
```
cd my-project
npm install
npm run dev
```
修改App.vue
```js
```
### 3.配置vue-router
##### 1.安装vue-router(最新版)
`npm i vue-router`
##### 2.在src下新建router/index.js
```js
import { createRouter, createWebHashHistory } from 'vue-router'
const Router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/index',
name: 'Index',
component: () => import("../views/index.vue"),
},
]
})
export default Router
```
##### 3.在main.js中导入
```js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'//导入router
const app = createApp(App)
//注册路由
app.use(router).mount('#app')
```
### 4.配置vuex
##### 1.安装vuex
`npm i vuex`
##### 2.在src下创建store/index.js
```js
//这里后续可以继续拆分
import { def } from '@vue/shared'
import { createStore } from 'vuex'
const store = createStore({
state:{},
getters:{},
mutations:{},
actions:{}
})
export default store
```
##### 3.在main.js中导入
```js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'//导入router
import store from './store/index.js'//导入vuex
const app = createApp(App)
//注册路由和vuex
app.use(router).use(store).mount('#app')
```
### 5.导入scss
##### 1.安装scss
`npm install --save-dev sass`
##### 2.在src/assets下新建scss/global.scss
```js
//随便加点样式,这里是未来的全局样式
$font-size-txts: 14px;
$font-size-txtm: 16px;
$font-size-btxtl: 18px;
$font-size-titles: 20px;
$font-size-titlem: 22px;
$font-size-titlel: 22px;
```
##### 3.在vite.config.js中配置CSS预处理语言
```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// alias:{
// '@':path.join(__dirname,'src')
// }
css: {
//css预处理
preprocessorOptions: {
scss: {
/*
引入var.scss全局预定义变量，
如果引入多个文件，
可以使用
'@import "@/assets/scss/globalVariable1.scss";@import "@/assets/scss/globalVariable2.scss";'
这种格式
*/
additionalData: '@import "@/assets/scss/global.scss";'
}
}
}
})
```
### 6.封装axios
##### 1.安装axios
`npm install axios`
##### 2.在src下新建api/index.js
用于封装axios
```js
// 封装axios
import axios from 'axios'
const request = axios.create({
baseURL: 'https://api.apiopen.top',
timeout: 1000,
headers: { 'X-Custom-Header': 'foobar' }
});
//添加请求拦截
request.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
request.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default request
```
##### 3.在src下新建api/request.js
用于封装接口请求方法
```js
//请求方法
import request from './index.js'
export const recommendPoetry = () => {
return request({
url: '/recommendPoetry',
method: 'post'
})
}
```
### 7.完成后项目框架
