为什么选 Vite
Vite 并不是基于 Webpack 的,它有自己的开发服务器,利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建,速度也更快。
Vite 目前还处于测试阶段,看来 Vite 项目的目的并不是像 Vue CLI 那样的一体化工具,而是专注于提供一个快速的开发服务器和基本的构建工具。
Vite 开发服务器至少会比 Webpack 快 10 倍左右。对于一个基本的项目来说,与 2.5 秒相比,开发构建/重新构建的时间相差 250ms。
在一个较大的项目中,这种差异会变得更加明显。Webpack 开发服务器在构建/重新构建时可能会慢到 25-30 秒,有时甚至更慢。与此同时,Vite 开发服务器可能会以恒定的 250ms 的速度为同一个项目提供服务。
vite中文文档:开始 | Vite 官方中文文档
vue3中文文档:Vue3
然后我们开始创建项目
// 创建项目示例
npm init @vitejs/app 项目名
yarn create @vitejs/app 项目名
这样我们就下载成功了
接着下载node包
//下载node_modules
yarn
基本目录
安装我们开发需要的依赖,执行一下命令
//下载依赖
//开发依赖
yarn add vue-router@next vuex@next element-plus axios -S
//生产依赖
yarn add sass -D//删除依赖(只是展示一下命令,并不需要去操作)
yarn remove vue-router@next vuex@next element-plus axios
yarn remove sass
我们安装完的命令可以在package.json里面查看是否安装
然后启动项目:npm run dev
vite.config.js 用来配置项目的参数,类似vue.config.js
项目创建完毕之后我们就开始配置项目所需架构
我们发现我们项目创建完成之后是src目录下是没有router,store,views这些都是我们后续自己创建的
vite项目中使用的不是vue.config.js,而是vite.config.js
vite.config.js作用和vue.config.js作用相似,但是配置的方式会有所不同
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
//修改服务的host和port
server:{
host:'127.0.0.1',
port:'8080'
},
//转换./src文件夹为@符号
resolve: {
alias:{
'@': path.resolve( __dirname, './src' )
}
},
plugins: [vue()]
})
1.如何使用scss文件初始化样式
在src目录下创建scss文件里面放上global.scss里面放上以下代码
@charset "utf-8";
// 变量存储
// 字体Unicode编码 微软雅黑:\5FAE\8F6F\96C5\9ED1 , 宋体:\5B8B\4F53
$pcFont: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', arial;
$defaultColor: #333;
$mobileFont: 'Helvetica Neue', Helvetica, STHeiTi, Microsoft YaHei, sans-serif, Microsoft JhengHei, Arial;
$browser: null;
%display {
display:inline-block;
*display:inline;
*zoom:1;
}
%text-indent {
font-size:0;
text-indent:-99999em;
overflow:hidden;
}
%box-sizing {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
// 绝对居中
@mixin center($width, $height) {
position: absolute;
left:50%;
top:50%;
width:$width;
height:$height;
margin:(-$height / 2) 0 0 (-$width / 2);
}
// 设置动画名称
@mixin animation($aniName) {
-webkit-animation:$aniName;
-moz-animation:$aniName;
-o-animation:$aniName;
animation:$aniName;
}
// 设置延迟执行时间
@mixin animation-delay($time) {
-webkit-animation-delay:$time;
-moz-animation-delay:$time;
-o-animation-delay:$time;
animation-delay:$time;
}
// 设置阴影
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
-moz-box-shadow:$shadow;
-o-box-shadow:$shadow;
box-shadow:$shadow;
}
// 圆角
@mixin border-radius($radius) {
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-o-border-radius:$radius;
border-radius:$radius;
}
// 设置过渡
@mixin transition($transition...) {
-webkit-transition:$transition;
-moz-transition:$transition;
-o-transition:$transition;
transition:$transition;
}
// 设置旋转位置
@mixin transform-origin($origin...) {
-webkit-transform-origin:$origin;
-moz-transform-origin:$origin;
-o-transform-origin:$origin;
transform-origin:$origin;
}
@mixin transform($transform...) {
-webkit-transform:$transform;
-moz-transform:$transform;
-o-transform:$transform;
transform:$transform;
}
// 设置关键帧
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
$browser: '-webkit-'; @content;
}
@-moz-keyframes #{$name} {
$browser: '-moz-'; @content;
}
@-o-keyframes #{$name} {
$browser: '-o-'; @content;
}
@keyframes #{$name} {
$browser: ''; @content;
}
}
/* ********************重置样式 reset******************** */
/* *********PC端********** */
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, figure, figcaption {
margin:0px;
}
ul, ol {
list-style:none;
margin:0px;
padding:0px;
}
body {
font:14px/1.5 $pcFont;
width:100%;
color: $defaultColor;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 {
font-weight:normal;
}
/* 清除点击出现虚拟框 */
a{
outline:none;
text-decoration:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
&:focus{
outline:0;
}
&:link,
&:visited {
color: $defaultColor;
text-decoration:none;
}
}
a img {
border:none;
}
input, textarea, select {
outline:none;
font:12px/1.5 $pcFont;
}
/* 清除浮动 */
.clearfix {
*zoom:1;
&:after {
display:block;
content:"\200B";
clear:both;
height:0;
}
}
/* *********移动端********** */
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, figure, figcaption {
margin:0px;
}
/* 改变盒子模型 */
section, article, nav, aside, footer, header, div, p, ul, li, input, textarea {
display: block;
@extend %box-sizing;
}
html, body {
-webkit-user-select: none;
/* 禁止选中文本 */
user-select: none;
-webkit-text-size-adjust: 100%;
/* iphone禁用文字大小调整 */
-ms-text-size-adjust: 100%;
}
html {
font-size:625%;
}
body{
font:.16rem/1.6 $mobileFont;
color:#333;
-webkit-overflow-scrolling: touch;
}
h1, h2, h3, h4, h5, h6{
font-weight:normal;
}
/* 清除点击虚拟框 */
a, div, p, span, ul, li, i, img, input {
outline:0;
text-decoration:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:focus{
outline:0;
}
a:link,a:visited{
color:$defaultColor;
text-decoration:none;
}
a img{
border:0 none;
}
a, img {
-webkit-touch-callout: none;
/* 禁止长按链接与图片弹出菜单 */
}
input, textarea, select {
outline: none;
color: $defaultColor;
font-family: $mobileFont;
}
input {
/* 清除 iphone 中 input 默认样式 */
-webkit-appearance: none;
}
/* 清除浮动 */
.clearfix {
*zoom:1;
&:after {
display:block;
content:"\200B";
clear:both;
height:0;
}
}
在组件中我们这样使用即可:
接着就是我们的router.
2.配置路由文件
安装路由 Vue Router
npm install vue-router@4
配置路由文件(建立路由js)
在src目录下创建router文件里面放上index.js
内容如下:
import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
{
path:'/',
name:'index',
component:()=>import('../views/Home.vue')
}
]
const router = createRouter({
history:createWebHashHistory(),
routes
})
export default router;
创建好了router文件后,记得一定要导出,在main.js中使用
import { createApp } from 'vue'
import App from './App.vue'
// 引入上面新建的路由文件
import router from './router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
既然使用路由我们一定要在所需要的页面配置路由出口
3.整合Vuex:(相对比较简单)
可以参考官网:What is Vuex? | Vuex
npm install vuex@next --save
在src目录下新建store的index.js
//store文件下的index.js
import { createStore } from 'vuex'
export default createStore({
state () {
},
getters:{
},
mutations: {
}
})
main.js下使用
import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'
import router from './router/index'
createApp(App).use(router).use(store).mount('#app')
4.整合axios:
npm install axios
在src配置下创建request放上一个axios.js和一个request.js
根据自己的接口文档来配置所需要的内容
//axios.js
import axios from 'axios'
const instance = axios.create({
//baseURL: 'https://some-domain.com/api/',//配置baseURL
timeout: 1000,
//headers: {'X-Custom-Header': 'foobar'}
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
export default instance
//request.js
import http from "@/request/axios.js"
export function getLogin(data) {
return request({
url: '/adminapi/login',
method: 'post',
data: data
})
}
在你的组件里面引用即可: