Vue 项目创建
环境要求
- node.js (项目运行环境)
- npm (JavaScript依赖管理包)
- vue cli (脚手架)
Vue项目架构介绍
-
总体结构
-
node_moudules:项目依赖的js包
-
router:路由器
-
store:vuex 全局共享数据
-
views:公共组件
-
App.vue:项目主文件、网页首页 main.js:项目入口文件
-
pcakage.json: 项目配置、依赖包管理
-
vue.config.js: vue-cli配置文件
一些基础配置
- 在文件vue.config.js中
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
port: 8000,
// 配置代理
// proxy:{
// '/api':{
// target:"http://localhost:8000/",
// pathRewrite:{
// '^/api': "" //不需要的路径
// }
// }
// }
}
})
-
项目启动
npm run serve
实际上这个serve是一个脚本,在文件package.json中。
"scripts": {
"serve": "vue-cli-service serve", //启动服务
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
网页设计
基本标签
template标签必须存在,相当于html标签。
居中设置
display: flex; /* 垂直居中 */
flex-direction: column; /* 垂直排列 */
align-items: center; /* 水平居中 */
基础标签是
,用于包含所有标签。
设置背景
background: url('./image/03.png') center/cover fixed no-repeat; /* 背景图片 */
background-color: transparent; /* 透明背景 */
background: rgba(0, 0, 0, 0.8); /* 黑、透明0.8 */
background-color: rgba(255, 255, 255, 0.45); /* 白、透明0.8 */
调整元素位置
height;width;position;margin;padding;
样式
font-size;border;transition: transform 0.2s;border-radius: 50%;overflow(超出的内容): hidden;
数据、函数绑定
<p class="post-author">{{ post.author }}</p>
v-bind:value="(标签的属性名)" //未知错误
<input type="text" v-model="username" class="input" placeholder=" 请设置用户名"> /* 专用于输入数据 */
<img src="../icons/appendix.png" alt="Link" class="icon" @click="publishComment(index)">
路由
路由组成:路由器、路由链接、路由视图
路由器负责设置路由跳转(尽量配置懒加载)
import { createRouter, createWebHashHistory } from 'vue-router'
//懒加载
import HomeView from '../views/HomeView.vue';
import ArticleView from '../views/ArticleView.vue';
const routes = [
{
path: '/',
name: 'Home',
// component: import('../views/LoginView.vue')
component: HomeView
},
{
path: '/article',
name: 'Article',
// component: import('../views/LoginView.vue')
component: ArticleView,
children: [
{
path: '', // 默认路由为空字符串
redirect: '/blog' // 重定向到 /blog 路由
},
]
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
路由链接和路由视图负责展示
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
编程跳转
<input type="button" value="编程跳转" @click="jump()">
jump(){
this.$router.push('/about')
}
文件上传
通过img标签锁定input标签(ref),然后触发click方法。
<input type="file" ref="postImageInput" @change="addPostImage" style="display: none;">
<img src="../icons/camera.png" alt="Camera" class="icon"
@click="triggerFileInput('postImageInput')">
再通过event里的file提取url,使用 FileReader 对象读取文件内容。reader.onload 回调函数在文件读取完成后执行,将读取到的文件内容(即 Base64 编码的字符串)存储在 this.newPostImages 数组中,调用 readAsDataURL
方法开始读取文件,将其转换为 Base64 编码格式。
triggerFileInput(refName) {
const fileInput = this.$refs[refName];
fileInput.click();
},
addPostImage(event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const imageUrl = URL.createObjectURL(file);
this.previewFiles.push(imageUrl);
const reader = new FileReader();
reader.onload = (e) => {
this.newPostImages.push(e.target.result);
};
reader.readAsDataURL(files[i]);
}
},