文章目录

• 生成Vue项目脚手架
• 分析项目结构及src目录
• 开发流程

• 路由 vue-router

生成Vue项目脚手架

vue-cli
cnpm install -g @vue/cli
vue create myapp / vue ui
以上创建项目使用的 脚手架 3 的版本 ---- webpack 4
如果想要使用2的版本 ---- webpack3
npm install -g @vue/cli-init
vue init webpack myapp2

分析项目结构及src目录

-node_modules // 项目需要使用的依赖文件
-public // 静态资源文件
-src // 我们的主场
-tests // 测试
.browserslistrc // 浏览器版本的设置 使用最新的版本
.editorconfig // 编辑器的设置
.eslintrc.js // 代码格式校验
.gitignore // git的忽略文件
babel.config.js //
babel配置文件
cypress.json // 测试的插件配置
package.json // 项目的一个描述的文件
postcss.config.js //
css的配置 README.md

vue主要部分就是src目录

-src
-assets // 静态资源的文件
-components // 项目中需要的组件
-views // 应用中的页面 （路由找页面，页面找组件）
App.vue // 总页面
main.js // 入口逻辑文件 --- 视图绑定到元素上
registerServiceWorker.js // 上线执行的一个文件
router.js // 路由
store.js // 状态管理器

开发流程

修改App.vue

<template>
<div id="app">
</div>
</template>
<style lang="scss">

</style>

<template>
<div id="app">
<header class="herder">头部</header>
<div class="content">内容</div>
<footer class="footer">底部</footer>
</div>
</template>

抽离页面组件以及底部组件

路由 vue-router

在项目views中创建四个文件夹分别为home,find,cart,user,里面各创建一个index.vue文件
每一个文件
路由文件处引入 Kind.vue Cart.vue User.vue --- 参照引入的Home

{
path: '/home',
name: 'home',
component: () => import('@/views/home/index.vue') // 路由懒加载
},
{
path: '/kind',
name: 'kind',
component: () => import('@/views/kind/index.vue')
},
{
path: '/cart',
name: 'cart',
component: () => import('@/views/cart/index.vue')
},
{
path: '/user',
name: 'user',
component: () => import('@/views/user/index.vue')
}

App.vue中删掉页面组件和注册的方法，使用<router-view></router-view>代替
修改components/Footer.vue,增加点击路由变化

<template>
<footer class="footer">
<ul>
<li>
<span class="iconfont icon-shouye"></span>
<p>首页</p>
</li>
<li>
<span class="iconfont icon-icon"></span>
<p>分类</p>
</li>
<li>
<span class="iconfont icon-tuanduicankaoxian-"></span>
<p>购物车</p>
</li>
<li>
<span class="iconfont icon-wode"></span>
<p>我的</p>
</li>
</ul>
</footer>
</template>

路由的使用

将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。
1、创建好项目时会自动生成一个文件 router.js,如果没有的话，执行以下步骤
cnpm / npm i vue-router -S
创建src/router.js
2、构建 vue-router 的基本文件结构

// 引入Vue 和 vue-router
import Vue from 'vue'
import Router from 'vue-router'
// 引入Home组件
import Home from '@/views/Home'
// Vue 使用 vue-router,这一句必不可少
Vue.use(Router)
// 创建路由
const router = new Router({
routes: [ // 路由规则（路由的路径、名字、组件） ---- 组件映射到路由
{ path: '/', // 路由
name: 'home', // 路由的名字
component: Home // 路由对应的组件
},
... // 之后的各项路由规则
]
}) export default router // 暴露路由

3、如果是脚手架创建的，那么可以忽略，如果不是，需要自main.js处添加如下代码

// 导入路由文件
import router from './router' // 创建和挂载根实例。
// 通过 router 配置参数注入路由，从而让整个应用都有路由功能
new Vue({
router, // 创建和挂载根实例
render: h => h(App)
}).$mount('#app')

通过给new Vue() 注入了路由，这样就可以在整个项目的任何位置都可以访问到路由对应的对象
eg: 在首页中读取，views/Home.vue

<template>
<div class="container">
<header class="header">首页头部</header>
<div class="content">
内容
</div>
</div>
</template>
<script>
export default {
mounted () {
console.log(this.$router)
console.log(this.$route)
}
}
</script>

4、告诉 Vue Router 在哪里渲染它们

<template>
<div id="app">
<router-view></router-view>
<footer class="footer">
</div>
</template>

5、控制路由的变化， <router-link></router-link>， src/components//Footer.vue
使用 router-link 组件来导航.
通过传入 to 属性指定链接
<router-link> 默认会被渲染成一个 <a> 标签,可以使用 tag 属性生成目标标签

<template>
<div id="app">
<router-view></router-view>
<footer class="footer">
<ul>
<!-- router-link会被渲染成为a标签，如果不想改变，则使用tag标签生成目标标签 -->
<router-link to="/home" tag="li">
<span class="iconfont icon-shouye"></span>
<p>首页</p>
</router-link>
<router-link to="/kind" tag="li">
<span class="iconfont icon-icon"></span>
<p>分类</p>
</router-link>
<router-link to="/cart" tag="li">
<span class="iconfont icon-tuanduicankaoxian-"></span>
<p>购物车</p>
</router-link>
<router-link to="/user" tag="li">
<span class="iconfont icon-wode"></span>
<p>我的</p>
</router-link>
</ul>
</footer>
</div>
</template>

6.页面发生变化的标识 ---- 底部选型卡的选中的颜色
审查元素得知，选中的元素会多两个class ： router-link-exact-active router-link-active
添加样式即可 App.vue中的样式表

<style lang="scss">
// 导入scss文件
// @/lib/reset.scss   @表示的是src目录
@import '@/lib/reset.scss';
html, body, #app {
@include rect(100%, 100%);
}
#app {
@include flexbox();
@include flex-direction(column);
.container {
@include flex();
@include rect(100%, auto);
@include flexbox();
@include flex-direction(column);
.header {
@include rect(100%, 0.44rem);
@include background-color(#f66);
}
.content {
@include flex();
@include rect(100%, auto);
@include overflow(auto);
}
}
.footer{
@include rect(100%, 0.5rem);
@include background-color(#efefef);
ul{
@include rect(100%, 100%);
@include flexbox();
li{
@include flex();
@include flexbox();
@include flex-direction(column);
@include justify-content();
@include align-items();
span{
@include font-size(0.24rem);
}
p{
@include font-size(0.12rem);
}

&.router-link-active{
@include color(#f66);
}
}
}
}
}
</style>

• 点赞 4
• 收藏
• 分享
• 文章举报