Vue3+Vite+Scss+axios立即入门

为什么选 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
    })
}

在你的组件里面引用即可：