Vue框架--项目开发流程

一：创建项目

方法一:

.全局安装脚手架：cnpm install -g @vue/cli
//工具将被安装到当前使用的node版本的mode_modules下
vue-cli:是vue命令行工具，需要安装它才能直接通过vue命令来操作其他的操作

查看是否安装成功：vue-V
// 如果安装成功会出现当前vue-cli的版本

方法二:

vue create myapp / vue ui：使用图形界面创建项目

二.项目目录结构分析

安装好 未改动过的项目：

目录/文件	说明
node_modules	项目需要使用的依赖文件
public	静态资源文件
src	开发目录，基本上绝大多数工作都是在这里开展的
tests	测试
.browserslistrc	浏览器版本的设置 使用最新的版本
.editorconfig	编辑器的设置
.eslintrc.js	代码格式校验
.gitignore	git的忽略文件
babel.config.js	babel配置文件
cypress.json	测试的插件配置
package.json	项目的一个描述的文件
postcss.config.js	css的配置
tests	测试
tests	测试

src目录分析

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

修改package.json文件
在package.json文件中，增加运行命令（可加可不加）：
“dev”: “cnpm run serve”,

三.项目开发流程

1. 启动项目

在终端输入：cnpm run serve 让项目运行起来

可以看到，地址为http://localhost:8080/

在浏览器中打开,初始项目如下显示：

2.创建页面基本布局

a.修改App.vue
将App.vue里原来样式删除，只留下基本结构，再添加js样式

b. 结构修改：

当点击底部的时候，container可以变化
注：template内部只能有一个顶级标签

c.拷贝scss文件到src目录下

修改base.scss中responsive-type的属性值（自动适配屏幕）

在App.vue中导入scss文件

d. 创建基本结构

 html,body,#app{
  @include rect(100%,100%);   
}

#app{
  @include flexbox();   // 声明其为弹性盒布局
  @include flex-direction(column);  //弹性盒的方向
  .container{
     @include flex();   // flex:1
     @include rect(100%,auto);   //因为flex(),垂直方向默认宽度为.1px
     @include flexbox();
     @include flex-direction(column);
    .header{
       @include rect(100%,0.44rem);
       @include background-color(#f99);
    }
    .content{
       @include flex();   // 除了头部和底部剩下的空间
       @include rect(100%,auto);
    }
  }
  .footer{
    @include rect(100%,0.5rem);
    @include background-color(#efefef);
  }
}

此时页面效果：

##### 3. 设置页面底部
a.初步结构

<footer class="footer">
        <ul>
            <li>
               <span></span>
               <p>首页</p>
            </li>
            <li>
               <span></span>
               <p>分类</p>
            </li>
            <li>
               <span></span>
               <p>购物车</p>
            </li>
            <li>
               <span></span>
               <p>我的</p>
            </li>
        </ul>
     </footer>

初步样式：

ul{
        @include rect(100%,100%);
        @include flexbox();
      li{
          @include flex();        
          @include flexbox();    //元素水平垂直居中
          @include justift-content();
          @include align-items();
      }
     }

添加图标
网址：https://www.iconfont.cn/search/index
搜索图标，并且加入购物车

将图标添加至项目

复制代码

在publice下的index.html文件中将刚才复制的地址引入

复制刚才加入购物车的图标的代码

把图标代码依次放进span标签

 <li>
     <span class='iconfont icon-shouye'></span>
     <p>首页</p>
 </li>

效果：

再修改样式
li标签下加一条：@include flex-direction(column);

span{
          @include font-size(24px);
        }
        p{
          @include font-size(12px);
        }

此时效果

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

views目录下创建四个文件夹，分别代表首页、分类页面、购物车页面、个人中心页面，文件夹下面再创建vue文件

将各部分组件依次抽离出来：

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

抽离底部组件：
在src目录下的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-qicheqianlian-'></span>
          <p>购物车</p>
        </li>
        <li>
          <span class='iconfont icon-gerenzhongxin'></span>
          <p>我的</p>
        </li>
      </ul>
     </footer>
</template>

4.路由 vue-router

在router.js中导入组件

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',   //路由的重定向
      name: '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')
    }
  ]
})

根据路由变化显示不同视图：
告诉 Vue Router 在哪里渲染它们

路由的声明式跳转
将li标签替换成router-link
控制路由的变化， ， src/components/common/Footer.vue
使用 router-link 组件来导航.
通过传入 to 属性指定链接
router-link 默认会被渲染成一个 a 标签,可以使用 tag 属性生成目标标签

<footer class="footer">
      <ul>
        <router-link to="/home" tag="li">  //<!-- router-link会被渲染成为a标签，如果不想改变，则使用tag标签生成目标标签 -->路由的a连接跳转到哪里去
          <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-qicheqianlian-'></span>
          <p>购物车</p>
        </router-link>
        <router-link to="/user" tag="li">
          <span class='iconfont icon-gerenzhongxin'></span>
          <p>我的</p>
        </router-link>
      </ul>
     </footer>

li样式下方添加

&.router-link-active{
          @include color(#f99); //设置文本颜色
        }

5.首页请求列表数据

安装模块：cnpm / npm i axios -S
src/views/home/index.vue中

<script>
import axios from 'axios' //一定不要加分号，否则就报错
export default{
    mounted () {
        axios.get('https://www.daxunxun.com/douban').then(res => {
            console.log(res.data)
        })
    }
}
</script>

拿到数据

布局列表组件
定义组件：在src/components下新建文件Prolist.vue

<template>
   <ul>
      <li class="prolist">
          <div class="itemImg">
             <img src="" alt="">
          </div>
          <div class="itemInfo">
             <h4>标题</h4>
             <div>
               演员
             </div>
             <p>
               评分: 9.0
             </p>
          </div>
      </li>
   </ul>
</template>

index.vue中引入

import Prolist from '@/components/Prolist'

注册组件

components: {
       prolist: Prolist
    },

渲染数据

<prolist></prolist>

样式

<style lang="scss">
@import '@/lib/reset.scss';

.prolist{

    .proitem{
         @include rect(100%,1.2rem);
         @include border(0 0 1px 0,#ccc, solid);
         @include flexbox();
        .itemImg{
         @include rect(1.2rem,1.2rem);
         img{
             @include rect(1rem,1rem);
             @include margin(0.1rem);
             @include border(1px,#ccc,solid);
         }
        }
        .itemInfo{
           
        }
    }
}

</style>

首页请求完的数据传递给Prolist.vue
index.vue中

data () {
       return {
           prolist:[]
       }
    }

this.prolist = res.data

 <prolist :prolist="prolist"></prolist>

Prolist.vue中

<script>
export default {
    props: ['prolist']
}
</script>

App.vue中content样式增加一条：
滚动条显示

@include overflow(auto);

<template>
  <ul class="prolist">
    <li class="proitem" v-for="item of prolist" :key="item.id">
      <div class="itemImg">
        <img :src="item.images.small" alt="">
      </div>
      <div class="itemInfo">
        <h4>
          {{ item.title }}
        </h4>
        <div>
          演员:
          <span v-for="itm of item.casts" :key="itm.id">
            {{ itm.name }} /
          </span>
        </div>
        <div>
          导演:
          <span v-for="itm of item.directors" :key="itm.id">
            {{ itm.name }} /
          </span>
        </div>
        <p>
          评分： {{ item.rating.average }} / 票房： {{ item.collect_count }}
        </p>
      </div>
    </li>
  </ul>
</template>

public/index.html 添加如下代码：

 <meta name="referrer" content="no-referrer">

效果：

简单的页面先写到这里，后续会继续更新！