Vuejs 项目实战笔记(一)

Vuejs 项目实战笔记(一)

• 参考：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili

目录

创建文件夹目录结构

CSS文件引入

创建vue.config.js（根目录下），别名设置

.editorconfig 项目风格设置

引入TabBar

安装路由

v-slot使用

网页标题栏的小图标设置

导航栏

获取首页数据：网络模块

轮播组件

推荐信息展示

创建文件夹目录结构

• 参考：GitHub - coderwhy/supermall: a vuejs supermall

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使用

• 参考：vue slot弃用[vue/no-deprecated-slot-attribute]_weixin_45532746的博客-CSDN博客

•  低版本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使用