VUE简单创建项目

生成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>