0125-1-vue3初体验

2024-01-26 02:28
文章标签 javascript vue vue3 frontend 初体验 0125

本文主要是介绍0125-1-vue3初体验，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue3尝鲜体验

在这里插入图片描述

初始化

安装@vue/cli@next：

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

然后在 Vue 项目运行：

vue upgrade --next

项目目录

vue3-template
├── index.html	//	html模板
├── mock		// mock数据
│   └── user.js
├── node_modules
├── package-lock.json
├── package.json
├── plugins		// 自定义插件
│   └── vite-plugin-virtual-file.js
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── App.vue
│   ├── assets		// 资源文件
│   ├── components
│   ├── layouts		// 基本布局
│   ├── main.js		
│   ├── plugins		// 用于配置第三方插件，如element等
│   ├── router		// 路由
│   ├── store		// vuex状态管理
│   ├── styles		// 样式配置
│   ├── utils		// 工具包，如request
│   └── views		// 页面
├── .env.development// 配置环境
├── .env.production	// 配置环境
└── vite.config.js	// vite配置目录

vite创建项目：

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

vite项目配置：

vite配置文档

vite中配置vue，vuex都需要使用插件，使用 defineConfig配置有代码提示，推荐使用,配置。resolve/alias 配置别名。

import vueJsx from '@vitejs/plugin-vue-jsx'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
export default defineConfig({resolve:{alias: {'@': path.resolve(__dirname, 'src'),'comp': path.resolve(__dirname, 'src/components'),'views': path.resolve(__dirname, 'src/views'),'styles': path.resolve(__dirname, 'src/styles'),'plugins': path.resolve(__dirname, 'src/plugins'),'layouts': path.resolve(__dirname, 'src/layouts'),'utils': path.resolve(__dirname, 'src/utils'),}},plugins: [vue(),vueJsx(),viteMockServe({mockPath: 'mock',supportTs: false,})]
})

配置路由

npm install vue-router@4

router/index.js:

​ 配置Layout为基本的布局页

import { createRouter,createWebHashHistory} from 'vue-router';
import Layout from 'layouts/index.vue'
const router = createRouter({history: createWebHashHistory(),routes: [{ path:'/',component:Layout,children:[{path:"/", component: () => import('views/home.vue') }]}]
})
export default router

配置状态管理

npm install vuex@next --save

store/index.js

import { createStore } from 'vuex';const store = createStore({state () {return {count: 0}},mutations: {add (state) {state.count++}}})
export default store

配置样式文件

vite中可以直接导入.css文件，样式将影响导入的页面，最终会被打包到style.css

配置Sass

npm install sass

配置Postcss

npm i postcss autoprefixer

# vite.config.js
# 添加autoprefixer
import autoprefixer from 'autoprefixer';export default defineConfig({plugins: [autoprefixer()]
})

Scoped CSS

<style scoped>
/**/
</style>

CSS Module

<style module>
/**/
</style>

资源处理

我们可以在*.vue 文件的template, style和纯.css文件中以相对和绝对路径方式引用静态资源。

<!-- 相对路径 -->
<img src="./assets/logo.png">
<!-- 绝对路径 -->
<img src="/src/assets/logo.png"><style scoped>
#app {background-image: url('./assets/logo.png');
}
</style>

public目录

public 目录下可以存放未在源码中引用的资源，它们会被留下且文件名不会有哈希处理。

这些文件会被原封不动拷贝到发布目录的根目录下

<img src="/logo.png">

引入Element3

生产环境中按需引入，开发环境直接引入所有的包

src/ plugins/element3.js

// import Element3 from 'element3'; 
// import 'element3/lib/theme-chalk/index.css';
import {ElButton, ElRow, ElCol, } from 'element3'
import 'element3/lib/theme-chalk/button.css';
import 'element3/lib/theme-chalk/row.css';
import 'element3/lib/theme-chalk/col.css';
export default function (app) {
// app.use(Element3)app.use(ElButton).use(ElRow).use(ElCol)
}

main.js

import { createApp } from 'vue'
import Element3 from 'plugins/element3';createApp(App).use(Element3)

配置环境

npm install cross-env -D

在.env.development 或者 .env.production中配置相应环境

# 例如：
VITE_BASE_API=/api

package.json

# cross-env NODE_ENV=development 配置dev运行环境
{"scripts": {"dev": "cross-env NODE_ENV=development vite","build": "vite build","serve": "vite preview"},
}

配置请求

npm install axios

utils/request.js

import axios from 'axios';
import { Message, Msgbox } from 'element3';
import store from '@/store';
const service = axios.create({baseURL: import.meta.env.VITE_BASE_API,timeout: 5000,
})
service.interceptors.request.use((config) => {config.headers['X-token'] = 'my token';console.log("Aaa")return config;
}, (error) => {console.log(error);return Promise.reject(error);
})  service.interceptors.response.use((response) => {const res = response.data;if(res.code !== 20000) {Message.error({message: res.message || 'Error',duration: 5 * 1000,})if(res.code === 50008 || res.code === 50012 || res.code === 50014) {Msgbox.confirm('您已登出，请重新登录', '确定', {confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning',}).then(()=> {store.dispatch('user/resetToken').then(()=> {location.reload();})})}return Promise.reject(new Error(res.message || 'Error'));} else {return res;}
}, (error) => {console.log(error);Message.error({message: res.message || 'Error',duration: 5 * 1000,});return Promise.reject(error);
})  
export default service;

打包和部署

使用github actions持续集成，当push时打包上传

.github/workflows/publish.yml

name: 打包上传on: push: branches:- masterjobs:build:runs-on: ubuntu-lateststeps:- name: 迁出代码uses: actions/checkout@master- name: 安装node.jsuses: actions/setup-node@v1with: node-version: 14.0.0- name: 安装依赖run: npm install- name: 打包run: npm run build- name: 上传到服务器uses: easingthemes/ssh-deploy@v2.1.5env: SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}ARGS: "-rltgoDzvO --delete"SOURCE: "dist/"REMOTE_HOST: ${{ secrets.REMOTE_HOST }}REMOTE_USER: ${{ secrets.REMOTE_USER }}TARGET: ${{ secrets.REMOTE_TARGET }}

在github项目的action中配置secret

REMOTE_HOST ： 服务器ip

SERVER_SSH_KEY：本地私钥

REMOTE_USER： 服务器登录用户

REMOTE_TARGET：放置服务器哪个目录

SOURCE： 将哪个目录放置服务器中（此处打包后是生成dist目录）

服务器配置：

编辑 /etc/ssh/sshd_config 文件，开启服务器允许通过秘钥登录

PubkeyAuthentication yes

注意：使用root账号登录服务器时开启

PermitRootLogin yes

重启 ssh 服务器

service sshd restart

这篇关于0125-1-vue3初体验的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/645369。

相关文章

Nginx实现前端灰度发布

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
HTML5 data-*自定义数据属性的示例代码

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性（data-*）提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.
阅读更多...
CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》：本文主要介绍了如何使用CSS模拟HTML的title属性，通过鼠标悬浮显示提示文字效果，通过设置`.tipBox`和`.tipBox.tipContent`的样式，实现了提示内容的隐藏和显示，详细内容请阅读本文，希望能对你有所帮助... 效
阅读更多...
前端bug调试的方法技巧及常见错误

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》：本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误
阅读更多...
Vue中动态权限到按钮的完整实现方案详解

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表（routes）1.2 修改角色与路由权限表（role_routes）二、后端接口设计
阅读更多...
Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件：四、dhtmlx
阅读更多...
Vue ElementUI中Upload组件批量上传的实现代码

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl
阅读更多...
前端知识点之Javascript选择输入框confirm用法

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》：本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为：confirm 对话框会阻塞脚本的执行，直到用户作出选择。②
阅读更多...
如何使用CSS3实现波浪式图片墙

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》：本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙，通过设置图片的垂直偏移量，并使用动画使其周期性地改变位置，可以创建出动态且具有波浪效果的图片墙，同时，还强调了响应式设计的重要性，以确保图片墙在不同设备上都能良好显示，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2