supermall实战项目
1.划分目录结构
2.css文件的引用
normalize.css- > 对css进行初始化,对标签的风格进行了统一
3.配置文件
- 在脚手架3中需要创建vue.config,js文件,他会与node_modules中的配置进行合并
module.exports = {
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'network': '@/network',
'views': '@/views',
}
}
}
}
- 在项目中需要规范代码风格, 可以配置.editorconfig文件,在脚手架2会自动生成,但在脚手架3里面需要自己配置,可以从以前脚手架2的项目里拷贝过来
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
4. tabbar 引入和项目模块划分
- 把tabbar文件夹引入组件下的common文件夹(与当前业务无关)
- 把mainTabBar文件夹引入组件下的content文件夹(与当前业务有关),其中要修改图片引入路径
- 记得在APP.vue引入并显示
-
配置路由,项目的模块划分:tabbar -> 路由映射关系
下载 npm install vue-router --save
配置index.js文件
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' }) //3.导出路由 export default router
5. 修改小图标
只需要在public文件下的favicon.ico修改
6. 首页导航栏的封装与使用
在components的common下创建navbar文件夹,创建NavBar.vue文件
<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>
公共的css可以在封装的导航栏组件里配置,不同页面的导航栏不同的样式可以字该页面的组件中进行css配置,
比如home页面里导航栏的背景颜色是粉色