使用vue脚手架写移动端项目的前期布局

闲来无事，使用node脚手架创建一个小项目（1）

1.1安装脚手架的两种方式+了解项目目录

npm i -g @vue/cli
vue create myapp => vue ui  //可视化的方式

b) 了解项目中的目录

-node_modules  //项目需要使用的依赖文件。如果是从别处复制来的目录文件，千万不能
复制node_modules文件，需要使用此目录中安装依赖，命令为：npm install
-public //静态资源文件。
-src  //主要操作的文件之一
-tests //测试
-.browserslistrc //浏览器版本的设置  使用最新的版本
.editorconfig //编辑器的设置
.eslintrc.js //代码格式效验
.gitignore //git的忽略文件，上传git时，不能将node_modles文件上传，可以在此处设置默认不上传
babel.config.js //babel配置文件
cypress.json //测试的插件配置
package.json //项目的一个描述的文件
postcss.config.js //css的配置
READE.md

• 除了以上目录，我们还需要认识src中的目录结构

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

1.2了解main.js

main.js中引入了主要组件

import Vue from 'vue'  //导入。export default Vue ————导出

上面使用的是es6语法。
传统语法：const Vue = require(‘vue’)
module.exports = Vue

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')  // **************** 免去了在index.html中调用 <App />
// new Vue({
//   el: '#app',
//   router,
//   store,
//   components: {
//     app: App  // 在页面中使用 <app></app>
//   }
// })

1.3修改App.vue

<template>
  <div id="app">
  	<div class="container">
      <header class="header">头部</header>
      <div class="content">内容</div>
    </div>
    <footer class="footer">
      <ul>
        <li>首页</li>
        <li>分类</li>
        <li>购物车</li>
        <li>我的</li>
      </ul>
    </footer>
  </div>
</template>

<script>
// 单文件组件     .vue为后缀   至少得有一个template
export default { // 暴露该组件（要写js）， 如果不写script，会默认暴露出去
}
</script>

<style lang="scss">  //此处使用的是用scss库写样式。当然也可以用css/less/stylus写样式
	@import '@/lib/reset.scss';//需要引入scss文件，此文件是我个人常用的一个
	快速编写样式的scss文件，不引人也可以。

	html, body, #app {
	  @include rect(100%, 100%);  //宽100%，高100%
	}
	#app {
	  @include flexbox(); //一般使用弹性盒布局
	  }
</style>

下面需要构建每个对应的页面

1.4抽离页面组件和底部组件

在views文件夹中创建文件夹，home对应首页。。。user对应我的。文件夹内创建index.vue。-----默认的那两个文件夹可以删除，记得也要把router.js的对应路由删除

每个index.vue的内容为

将footer抽离出去。在文件夹components中创建Footer.vue
将App.vue中ul的内容复制，插入Footer.vue的template标签内

如何将底部的按钮与头部/内容对应呢？这就与路由有关了

1.4路由

将router.js中routers: []数组中的内容改为

routes: [
    {
      path: '/',
      redirect: '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中将

	<div class="container">
      <header class="header">头部</header>
      <div class="content">内容</div>
    </div>

改为

	<router-view></router-view>//根据路由的不同，此段代码显示的也不同

此时在地址栏上输入http://localhost:8080/home、http://localhost:8080/kind、http://localhost:8080/cart、http://localhost:8080/user就会渲染不同 的页面，但是还需要设置路由的声明式跳转。

1.5路由的声明式跳转

在App.vue中将每个li标签改为

	<router-link to='/home' tag='li'>
      <span class="iconfont icon-shouye"></span>
      <p>首页</p>
    </router-link>

此时就可以进行声明式跳转了
那么如何让用户知道我点了哪个按钮了呢？
在我们审查点击的li元素时会发现li增加了一个class名：router-link-active
只要设置router-link-active的css属性就OK啦