0125-1-vue3初体验

2024-01-26 02:28

本文主要是介绍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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果: 解密后的数据就是正常数据: 后端:使用的是spring-cloud框架,在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型,如 String, Number, Boolean,