第一步：安装node.js
https://nodejs.org/en/download/
安装链接：https://nodejs.org/en/
node -v 就能看到node.js 的版本号
第二步：安装vue-cli3
安装命令：npm install -g @vue/cli
第三步：下载开发工具vsocode
1.下载链接：https://code.visualstudio.com/Download
2.打开开发工具，可以用code . 打开vscode开发工具需要安装3个：
- Vue Language Features(Volar)
2.vue 3 Snippets
3.Chinese 中文语言
hubildex配置npm
第四步：创建项目
https://vitejs.cn/guide/#browser-support
npm init vite@latest
选择vue
创建项目后清空不需要的内容
如果运行项目想配置自动打开浏览器需要在
package.json在配置
1.配置运行自动打开浏览器，用–open：
2.如果想改变运行命令 “serve”:“vite”, 这样的话就可以运行 npm run serve
“scripts”: {
“dev”: “vite --open”,
“serve”:“vite”,
“build”: “vue-tsc --noEmit && vite build”,
“preview”: “vite preview --open”
},
安装路由
https://router.vuejs.org/zh/installation.html
安装： npm install vue-router@4
1.在src下建路由文件router
index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from ‘vue-router’
import Home from ‘…/views/Home.vue’
const routes: Array = [
{
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path: ‘/about’,
name: ‘About’,
component: () => import(/* webpackChunkName: “about” */ ‘…/views/About.vue’)
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
2.在main.ts上挂载
import { createApp } from ‘vue’
import ‘./style.css’
import App from ‘./App.vue’
import router from ‘./router’
let app=createApp(App)
app.use(router)
app.mount(‘#app’)
3.在app上引用
在项目中开发每个页面都需要引入ref，reactive，，，router，全局配置不再每个页面都引入
安装：npm i -D unplugin-auto-import 解决不需要每个页面都导入 ref…router 插件 ，然后在vite.config.ts文件下导入
参考：https://blog.csdn.net/xixihahakkyy/article/details/124940830
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
//为了不引入ref,reactive…，vue-router简写
import AutoImport from ‘unplugin-auto-import/vite’
export default defineConfig({
plugins: [vue(),
//为了不引入ref…，vue-router简写
AutoImport({
imports: [‘vue’, ‘vue-router’],
eslintrc: {
enabled: false, // Default false
filepath: ‘./.eslintrc-auto-import.json’,
globalsPropValue: true,
},
dts: “src/auto-import.d.ts”
})
],
})
配置别名 @来代替src
alias配置图片地址别名，就是@来代替 ./src
https://vitejs.cn/config/#resolve-alias
如果找不到path安装：npm install @types/node --save-dev
1.vite.config.ts文件下
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
//配置别名src=（@）
import { resolve } from ‘path’
export default defineConfig({
plugins: [vue()],
//配置别名@
resolve:{
alias:{
“@”:resolve(__dirname,‘src’) //_dirname表示绝对路径
}
},
})
2.在tsconfig.json下添加
“baseUrl”: “./”, //配置src=@
“paths”: {
“@/“:[”./src/”]
}
pinia
https://pinia.web3doc.top/getting-started.html
pinia特点：
1.pinia没有mutaions，只有：state、gettters，actions
2.pinia分模块不需要modules（之前vuex需要modules）
pinia体积小（性能更好)
1安装：
安装pinia和持久化存储
npm i pinia
npm i pinia-plugin-persist --save
2.main.ts引入
import { createPinia } from ‘pinia’
use(createPinia())
3.根目录新建store/index.ts中写入
import { defineStore } from ‘pinia’
export const useStore = defineStore(‘storeId’, {
state: () => {
return {
counter: 0,
}
},
getters:{},
actions:{}
})
4.组件使用
pian另一种基础用法讲解
counter,ts
import { defineStore } from “pinia”;
export const useCounterStore=defineStore(“counter”,{
state(){
return{
count:0
}
},
getters:{
doubleCount(state){
return state.count*4
}
},
actions:{
incremet(){
this.count++;
}
}
})
//对象解构的数据
//state的 count解构后数据丧失了响应式，数据不会变,
//action的 incremet解构出来方法可以用
//getter 获取的数据丧失了响应式，数据不会变,
const {count,incremet,doubleCount} =counter
个人信息
点击会改变state{{counter.count}}====不会改变{{count}}=getters{{counter.doubleCount}}{{doubleCount}}
<van-button @click=“go”>点击
<van-button @click=“incremet”>点击2
pinia持久化存储
https://xuexiluxian.cn/blog/detail/b2479329043c43eba75893fae0e3c2bc
-
安装pinia和持久化存储
npm i pinia
npm i pinia-plugin-persist -
新增store/index.js
import { createPinia } from ‘pinia’
import piniaPluginPersist from ‘pinia-plugin-persist’
const store = createPinia()
store.use(piniaPluginPersist)
export default store
- 新增store/user.js
import { defineStore } from ‘pinia’
export const useUserStore = defineStore({
id: ‘user’,
state: () => {
return {
token: ‘’
}
},
actions:{
setToken( token ){
this.token = token;
}
},
// 开启数据缓存
persist: {
enabled: true,
strategies: [{
key: ‘xiaoluxian_user’,
storage: localStorage,
//paths: [‘token’]
}]
}
})
安装组件vant
https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
1.安装：npm i vant -S
2.按需引入安装
npm i unplugin-vue-components -D
3.配置插件
如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：（配置完后引入子组件不用手动导入了，直接在temlate上使用）
import vue from ‘@vitejs/plugin-vue’;
import Components from ‘unplugin-vue-components/vite’;
import { VantResolver } from ‘unplugin-vue-components/resolvers’;
export default {
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
};
浏览器适配
第一种适配：Viewport 布局
npm install postcss-px-to-viewport --save-dev
因为vite中已经内联了postcss，所以并不需要额外的创建 postcss.config.js文件，vite关于css.postcss 我们只需要在 vite.config.ts中进行配置即可：具体配置如下:
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import postcsspxtoviewport from ‘postcss-px-to-viewport’
export default defineConfig({
plugins: [
vue()
],
css: {
postcss: {
plugins: [
postcsspxtoviewport({
unitToConvert: ‘px’, // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: [‘*’], // 指定转换的css属性的单位，代表全部css属性的单位都进行转换
viewportUnit: ‘vw’, // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: ‘vw’, // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: [‘vant-’], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
// exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
exclude: [],
landscape: false // 是否处理横屏情况
})
]
}
}
})
第二种：Rem 布局适配
1.先安装：npm i -S amfe-flexible
在main.ts挂载,可以看到根标签的像素变化
import ‘amfe-flexible’
2.再安装：
npm install postcss postcss-pxtorem --save-dev
因为vite中已经内联了postcss，所以并不需要额外的创建 postcss.config.js文件，vite关于css.postcss 我们只需要在 vite.config.ts中进行配置即可：具体配置如下:
//rem移动端适配
import postCssPxToRem from “postcss-pxtorem”;
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
//rem
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 37.5, // （设计稿/10）1rem的大小
propList: [''], // 需要转换的属性，这里选择全部都进行转换
})
]
}
}
})
两种适配对比
rem多次切换适配后需要刷新才能恢复适配
vw多次切换后可以不要刷新也自动适配
css reset样式重置
1.安装vant组件后，页面边距不需要重置 边距*{}，ul li 的点也自动去掉了
index.html的窗口配置
–>
小技巧自动输入文字为了方便看文档排版 lorem1000
在文件中使用lorem1000按回车
npm安装时-S -D分别的意思
S
即–save（保存）
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在
-D
即–dev（开发）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器
注意：在使用npm install一个插件的时候，需要添加上-s或-d，不然不会再package.json中显示。
axios安装配置
http://www.axios-js.com/zh-cn/docs/
1.npm install axios -S
2.在src下建文件axios/request.ts
import axios from “axios”;
import { Toast } from “vant”;
//请求加载动画
let loading: any;
const startLoading = () => {
interface Ioptions {
message: string;
forbidClick: boolean;
duration: number;
}
const options: Ioptions = {
message: ‘加载中…’,
forbidClick: false,//是否禁止背景点击
duration: 0 // 值为0时，toast不会消失
}
loading = Toast.loading(options);//弹框
}
//关闭加载
const endLoading = () => {
loading.clear();
}
const request = axios.create({
baseURL: import.meta.env.VITE_BASE_URL_API,
timeout: 5000
});
// 添加请求拦截器
request.interceptors.request.use((config)=> {
// 在发送请求之前做些什么
startLoading()//加载提示框
const token = window.localStorage.getItem(‘token’)
if (token) {
// config.headers[“authentication”]=token
config.headers={
…config.headers,
authentication:token
}
}
return config;
}, (error)=> {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
request.interceptors.response.use((response)=> {
// 对响应数据做点什么
endLoading()//关闭加载提示框
//判断code码
if(response.data.code !=0){
Toast(response.data.message)
}
console.log(‘response’,response)
return response.data;
}, (error)=> {
console.log(‘error’,error)
endLoading()//关闭加载提示框
// 对响应错误做点什么
Toast.fail(error.response.data.message);
return Promise.reject(error.response.data.message);
});
export default request
3.配置是生产环境还是开发环境
开发环境：新建 .env.development 文件的内容
ENV=‘development’
VITE_BASE_URL_API=‘/api’
生产环境：新建 .env.production文件的内容
ENV=‘producton’
VITE_BASE_URL_API=‘https:/xxx.com’
使用
import.meta.env.XXXX （xxx是自己在开发环境或者生产环境自己配置的名称，名称可以随便设置）
配置跨域
在vite.config.ts 上配置
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// base: ‘./’,//配置相对路径，因为上传到ngxi上是相对路径,上线之前必须要配
/配置跨越/
server:{
port: 8888, //端口设置
host: ‘0.0.0.0’, //开自己电脑ip
proxy:{
// 选项写法
‘/api’: {
target: ‘https://xxxx.com’,
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, ‘’)
},
}
},
})
配置上传到服务
base用来配置开发环境和生产环境的目录
没有配置前：/src/assets/logo.png
在vite.config.ts 上配置base，为了打包上线是相对路径可以找到，但是在开发是没有什么改变的还是 /开始，但是在线上是./开始
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
// https://vitejs.dev/config/
export default defineConfig({
base:‘./’,//配置相对路径，因为上传到ngxi上是相对路径，
plugins: [vue()]
})
6.在src下建api文件来放接口请求
login.ts
import request from “…/axios/request”;
/*
*Admin 参数的类型限制，是从type自己建的文件定义的类型，直接拿来使用
*ResponseSuccess：请求成功返回的类型限制，是从vite-env.d.ts文件下全局定义的可以直接使用，不需要引用
*/
export function doLogin(admin:Admin){
return request.post<any,ResponseSuccess<{token:string}>>(“/api/admin/login”,admin)
}
export function getSendCode(data: ISendCode) {
return request({
url: ‘/lh-third-in/auth/send/code’,
method: “get”,
params: data
})
}
新建type文件类型
//传参数约束
declare interface Admin{
id:number,
name:string,
password:string
}
//发送验证码
declare interface ISendCode {
type: number,
phone: number,
}
公共接口返回类型限制
//全局使用接口返回成功类型约束
declare global{
//返回成功类型
interface ResponseSuccess<T = {}>{
code:number;
message:string;
data:T
}
//返回列表类型的
interface IPageintion{
message:string;
code:number;
data:{
pageSize:number;current:number;total:number;data:T[]
};
}
}
export {}
文件使用：
注意：类型设置在其他文件使用时可以不需要引入文件也可以用
不能在这个文件放类型，不然全局的路由地址会报错
生产环境时移除console.log的配置
https://vitejs.cn/config/#build-terseroptions
需要安装（但是有的vite版本不需要安装）在vite.config.js下配置：
第一步安装：npm add -D terser
import { defineConfig } from ‘vite’
export default defineConfig( {
…
//第二步使用：
/生产环境移除console.log/
build:{
minify:‘terser’,
terserOptions:{
compress:{
//生产环境移除console.log
drop_console:true,
drop_debugger:true
}
}
},
…
} ）
sass安装
1.安装sass 和 sass-loader
npm install sass --save-dev
npm install sass-loader --save-dev
2、 vite.config.js配置
css: {
preprocessorOptions: {
scss: {
// 两种方式都可以
additionalData: ‘@import “@/assets/scss/global.scss”;’
// additionalData: ‘@use “@/assets/scss/global.scss” as *;’
}
}
},
3.在src/assets/文件下建global.scss文件，内容示范
$font-color-gray:rgb(147,147,147);
4.在文件中使用
less安装
1、首先安装less 和 less-loader
npm i less -D
npm i less-loader -D
2、 vite.config.js配置
export default defineConfig({
plugins: [vue()],
css: {
// css预处理器
preprocessorOptions: {
less: {
charset: false,
additionalData: ‘@import “./src/assets/css/global.less”;’,
},
},
}
})
3.在src/assets/文件下建global.less文件，内容示范
@bcg:#ff008c;
@color-ft: rgb(255, 145, 0);
4.A页面使用
引入css预处理器
https://vitejs.cn/guide/features.html#css-pre-processors
安装：npm install -D less
css: {
// css预处理器
preprocessorOptions: {
less: {
// 引入 mixin.less 这样就可以在全局中使用mixin.less中预定义的变量了
// 给导入的路径最后加上 ;
additionalData: ‘@import “./src/assets/css/mixin.less”;’
}
}
}
mixin.less文件定义变量
@a：red
在文件中使用
Color：@a
css rest
npm install reset-css
main.ts 挂载
import ‘reset-css’;
app：
css规则自动添加浏览器前缀：
https://www.postcss.com.cn/
利用autoprefixe
1.安装：npm install --save-dev autoprefixer
安装后查看是否成功
404访问错误就是找不到该路由时跳转的地方：
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#捕获所有路由或-404-not-found-路由
router文件下：
import { createRouter, createWebHashHistory } from ‘vue-router’
import Index from ‘@/pages/index.vue’
import NotFound from ‘@/pages/404.vue’
//路由配置
const routes=[{
path:‘/’,
component:Index
},
// 将匹配所有内容并将其放在 $route.params.pathMatch 下
{
path: ‘/:pathMatch(.)’,
name: ‘NotFound’,
component: NotFound
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
存储数据，配置存储用cookie：
https://vueuse.org/
https://vueuse.org/integrations/usecookies/
- 先安装：npm i @vueuse/integrations
2.再安装：npm i universal-cookie
3.在页面使用：
console.log(‘cookie’,cookie) //答应出来的可以在上面看
//如何使用cookies
//设置token，可以长期存储，关闭浏览器也是可以看见有存储
function set(){
cookie.set(“admin-token”,“1234566”)
}
//获取token
function get(){
console.log(cookie.get(‘admin-token’))
}
windicss工具 样式适合pc
https://cn.windicss.org/guide/
安装：
1.npm i -D vite-plugin-windicss windicss
2.然后，在你的 Vite 配置中添加插件：
vite.config.js
import WindiCSS from ‘vite-plugin-windicss’
export default {
plugins: [
WindiCSS(),
],
}
最后，在你的 Vite 入口文件中导入 virtual:windi.css：
main.js：
import ‘virtual:windi.css’
3.安装插件vscod：搜索 WindiCss IntelliSense 为了写样式的时候给提示
md5密码加密：
npm install js-md5
2. npm i --save-dev @types/js-md5
导入文件：
阿里巴巴图标使用
在index里引用
在普通页面使用
