Vuejs 项目实战笔记(一)
目录
创建文件夹目录结构
CSS文件引入
- GitHub 开源文件:normalize.css
- 创建base
- css定义变量语法
创建vue.config.js(根目录下),别名设置
- 参考:Vue --- vue中使用vue.config.js来配置路径别名_LiuDevelop的博客-CSDN博客
- 每次设置完毕后重新打开控制台(重新打开软件)
- 别名默认已经创建:'@':'src',脚手架2不能直接使用@/目录,得src/来命名其他别名
- 使用:在dom元素中使用需要在别名前面加上“~”
module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/assets', 'common': '@/common', 'components': '@/components', 'network': '@/network', 'views': '@/views', } } } }
.editorconfig 项目风格设置
root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true
引入TabBar
- common 可复用组件,其他项目可用
- content 当前项目相关的组件,多处地方用到
安装路由
- 参考:vue3报错“ Uncaught TypeError: Cannot read property ‘use‘ of undefined”_菜鸟的博客-CSDN博客
- npm install vue-router --save(安装失败,尝试以管理员身份打开软件再次安装)
- 创建映射文件:
- 使用示例:
import Vue from 'vue' import VueRouter from 'vue-router' const Home = () => import('../views/home/Home') const Category = () => import('../views/category/Category') const Cart = () => import('../views/cart/Cart') const Profile = () => import('../views/profile/Profile') // 1.安装插件 Vue.use(VueRouter) // 2.创建router const routes = [ { path: '', redirect: '/home' }, { path: '/home', component: Home }, { path: '/category', component: Category }, { path: '/cart', component: Cart }, { path: '/profile', component: Profile } ] const router = new VueRouter({ routes, mode: 'history' }) export default router
- main.js使用
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ render: h => h(App), router }).$mount('#app')
- 如果上面方式不行,使用下列方式
- 安装:npm install vue-router@4
- index.js文件:
import { createRouter, createWebHistory } from 'vue-router' const routerHistory = createWebHistory() const Home = () => import('../views/home/Home') const Category = () => import('../views/category/Category') const Cart = () => import('../views/cart/Cart') const Profile = () => import('../views/profile/Profile') const routes = [ { path: '', redirect: '/home' }, { path: '/home', component: Home }, { path: '/category', component: Category }, { path: '/cart', component: Cart }, { path: '/profile', component: Profile } ] const router = createRouter({ routes, history: routerHistory }) export default router
- main.js中使用
import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app')
- 路由使用:
v-slot使用
- 低版本slot使用:
网页标题栏的小图标设置
导航栏
<template> <div class="nav-bar"> <div class="left"><slot name="left"></slot></div> <div class="center"><slot name="center"></slot></div> <div class="right"><slot name="right"></slot></div> </div> </template> <script> export default { name: "NavBar" } </script> <style scoped> .nav-bar { display: flex; height: 44px; line-height: 44px; text-align: center; box-shadow: 0 1px 1px rgba(100,100,100,.1); } .left, .right { width: 60px; } .center { flex: 1; } </style>
- Home页面使用:
<template> <div class="home-nav"> <NavBar> <template v-slot:center> <div>购物街</div> </template> </NavBar> </div> </template> <script> import NavBar from 'components/common/navbar/NavBar' export default { name: 'Home', components: { NavBar, } } </script> <style> .home-nav { background-color: var(--color-tint); color: #fff; } </style>
获取首页数据:网络模块
- 安装axios模块: npm install axios --save
- request.js
import axios from 'axios' export function request(config) { // 1.创建axios的实例 const instance = axios.create({ baseURL: 'http://123.207.32.32:8000', timeout: 5000 }) // 2.axios的拦截器 // 2.1.请求拦截的作用 instance.interceptors.request.use(config => { return config }, err => { // console.log(err); }) // 2.2.响应拦截 instance.interceptors.response.use(res => { return res.data }, err => { console.log(err); }) // 3.发送真正的网络请求 return instance(config) }
- 使用(home.js):
import {request} from "./request"; export function getHomeMultidata() { return request({ url: '/home/multidata' }) }
- 在Home.vue中导入使用
- import { getHomeMultidata } from "network/home"
轮播组件
- 使用:
- Home.vue
推荐信息展示
- RecommendView.vue
<template> <div class="recommend"> <div v-for="item in recommends" class="recommend-item"> <a :href="item.link"> <img :src="item.image" alt=""> <div>{{item.title}}</div> </a> </div> </div> </template> <script> export default { name: "RecommendView", props: { recommends: { type: Array, default() { return [] } } } } </script> <style scoped> .recommend { display: flex; width: 100%; text-align: center; font-size: 12px; padding: 10px 0 20px; border-bottom: 10px solid #eee; } .recommend-item { flex: 1; } .recommend-item img { width: 70px; height: 70px; margin-bottom: 10px; } </style>
- Home.vue使用