vs插件准备
如果要使用vue3, 那么要把vue2使用的vetur插件禁用, 把vue使用的vue language features 插件启用,
如果使用ts语言, 就需要把typeScript vue plugin 插件启用, 如果用js语言就把typeScript vue plugin 插件禁用
创建项目
创建指令, 这一指令将会安装并执行 create-vue
npm init vue@latest
✔ Project name: … vue3TSDemo
✔ Package name: … vue3tsdemo
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
cd vue3TSDemo
npm install
npm run dev
当你准备将应用发布到生产环境时，请运行：
npm run build
安装需要的工具(按需引入)
一, 安装网络请求axios
安装
npm install axios --save
使用
- 创建request.ts文件进行封装成工具
// 引入axios
import axios from "axios";
// 引入axios的配置类型
import type { InternalAxiosRequestConfig } from "axios";
// 引入toast提示, 用于提示错误信息
import { ElMessage } from "element-plus";
// 获取服务器地址
const baseUrl = "http://192.168.10.215:7777"
// 创建请求
const service = axios.create({
// url = base url + request url
baseURL: baseUrl,
// request timeout
timeout: 1000 * 30,
// send cookies when cross-domain requests
withCredentials: true
});
// request拦截器
service.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
// 设置header
config.headers["appname"] = "mixi"
return config;
},
error => {
console.log(error);
return Promise.reject(error)
}
)
// response拦截器
service.interceptors.response.use(
// @ts-ignore
response => {
// 清除所有提示
ElMessage.closeAll();
const res = response.data;
if (res.code == 0) {
return Promise.resolve(res);
} else if (res.code == 1) {
ElMessage.error(res.errorMsg);
return Promise.reject(res);
}
},
error => {
ElMessage.closeAll();
console.log(error);
ElMessage.error('网络错误');
return Promise.reject(error);
}
)
export default service;
- 创建api.ts文件
// 引入请求工具
import request from "@/utils/request"
// 登录接口
export function login( params:Object ) {
return request({
url: "/login/",
method: "get",
data: params
})
}
// 获取验证码
export function loginMessage(params: Object) {
return request({
url: "/login/message/",
method: "get",
data: params
})
}
- 在vue文件中进行网络请求
import { login } from "@/api/api"
onMounted(() => {
login({ user: "张三", pwd: "" }).then(res => {
console.log(res);
}).catch(error => {
console.log(error);
});
});
二, 安装css嵌套工具sass
安装
以前用vue-cli的时候，还要安装sass-loader、node-sass什么的，安装的时候还会遇到各种问题，但是vite其实安装sass就可以了，很简单
npm install sass -D
使用
按需引入并使用
<style scoped lang="scss">
.list{
.list-item{
.title{
}
.content{
}
}
}
</style>
三, 安装日期处理类库moment
安装
npm install moment --save
使用
要使用的vue文件中按需引入,
import Moment from "moment";
也可以挂载全局变量
Vue.prototype.$moment = moment;
使用方式
let date = Moment("2020-06-03", "YYYY-MM-DD").fromNow();
一般创建一个自定义工具类dateUtil.ts进行封装
import Moment from "moment";
// 按指定时间获取时间戳 默认获取当前时间时间戳
// dateStr 需要转化为时间戳的时间, 格式为 "YYYY-MM-DD", ? 代表可传, 可不传
export function dateTimestamp(dateStr?:any) {
let stamp = new Date().getTime();
if (dateStr) {
stamp = new Date(dateStr).getTime();
}
return stamp;
}
// 时间戳转化为指定日期格式 默认转化为格式为 'YYYY-MM-DD hh:mm'
// timestamp: 需要格式化的时间戳,
// formatter: 需要转化成的格式, ? 代表可传, 可不传
export function dateFormatterTimestamp(timestamp: any, formatter?: any) {
let format = 'YYYY-MM-DD hh:mm:ss';
if (formatter) {
format = formatter;
}
const stamp = new Date(timestamp);
const date = Moment(stamp).format(format);
return date;
}
// 将时间秒数, 转化为几小时几分几秒
export function dateSecondsChangeToHours(seconds: any) {
// 需要转换的时间秒数量, 将字符串转换为数字
const secondsValue = parseInt(seconds);
// 天个数
let day = 0; // 分
// 小时个数
let hour = 0; // 分
// 分钟数
let minute = 0; // 小时
// 秒个数
let second = 0; // 天
// 秒数转化为分钟数
if (secondsValue > 60) {
// 如果秒数大于60秒, 计算有多少分钟
minute = secondsValue / 60;
// 计算剩余的秒数
second = secondsValue % 60;
// 继续将分转化为小时
if (minute > 60) {
// 如果分钟数大于60秒, 计算有多少小时
hour = minute / 60;
// 计算剩余的分钟数
minute = minute % 60;
// 继续将小时转化为天
if (hour > 24) {
// 大于24小时
day = hour / 24;
hour = hour % 24;
}
}
} else {
second = secondsValue;
}
let result = "";
// // 秒加0格式问题
// if (second < 9) {
// second = "0" + second;
// }
// // 分加0格式问题
// if (minute < 9) {
// minute = "0" + second;
// }
// // 小时加0格式问题
// if (hour < 9) {
// hour = "0" + second;
// }
// // 天加0格式问题
// if (day < 9) {
// day = "0" + second;
// }
result = day + "天" + hour + "小时" + minute + "分钟" + second + '秒';
return result;
}
// 根据出生日期(生日)计算年龄, 出生日期格式为 1970-01-01
export function getAgeFromBirthday(birthday:string) {
let age = 0
if (birthday) {
// 格式化时间格式
if (birthday.search('.') != -1) {
birthday = birthday.replace(/\./g, "-")
console.log(birthday)
}
const birthdayArray = birthday.split('-');
const nowDate = new Date();
const today = [nowDate.getFullYear(), nowDate.getMonth() + 1, nowDate.getDate()];
const ageArray = today.map((val, index) => {
return val - Number(birthdayArray[index]);
})
if (ageArray[2] < 0) {
const lastMonth = new Date(today[0], today[1], 0);
ageArray[1]--;
ageArray[2] += Number(lastMonth.getDate);
}
if (ageArray[1] < 0) {
ageArray[0]--;
ageArray[1] += 12;
}
age = ageArray[0] + 1;
}
return age;
}
四, 安装cookie管理工具js-cookie
npm install js-cookie --save
使用, 在需要使用的地方引入
import Cookies from "js-cookie";
// 组件中使用
// 写入cookie
Cookies.set('name', 'value')
// 读取
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
// 读取所有可见的cookie
Cookies.get()
// 删除某项cookie值
Cookies.remove('name')
五, 安装手机组件UI库vant
npm install vant --save
使用
在main.ts中引入并挂载
import vant from 'vant';
import 'vant/lib/index.css';
app.use(vant)
六, 安装实现移动端适配方案工具amfe-flexible
安装
npm install amfe-flexible --save
npm install postcss-px2rem --save-dev
使用
在项目根目录中, 新建 postcss.config.js, 并写入:
module.exports = {
plugins: {
'postcss-px2rem': {
// viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度.
// viewportHeight: 667, // 视窗的高度，对应的是我们设计稿的高度.(也可以不配置)
// unitPrecision: 5, // 保留几位小数，指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
remUnit: 37.5,
// selectorBlackList: ['tab-bar', 'tab-bar-item','shopping-cart-bottom-bar'], // 指定不需要转换的类
// minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位.
// mediaQuery: false // 允许在媒体查询中转换`px`
}
}
}
在 main.js 中引入 amfe-flexible 插件
import 'amfe-flexible'
七, 安装网页(饿了么)组件UI库element-plus
安装
npm install element-plus --save
使用
在main.ts中引入并挂载
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
八, 安装加载进度条nprogress
安装
npm install nprogress --save
九, 安装pinia需要使用的pinia-plugin-persistedstate插件来进行数据的存储
安装
npm install pinia-plugin-persistedstate --save
十, 安装可视化大屏自适应工具：autofit.js
安装
npm install autofit --save
十一, 安装图形或者边框生成组件
安装
npm install @kjgl77/datav-vue3 --save
网友评论