Vue学习笔记7——在webpack中配置.vue组件页面的解析、使用模板对象与使用饿了么的 MintUI 组件

爱被打了一巴掌 2022-02-16 12:58 235阅读 0赞

# Vue.js - day6 #

## 注意： ##

有时候使用`npm i node-sass -D`装不上，这时候，就必须使用 `cnpm i node-sass -D`

## 在普通页面中使用render函数渲染组件 ##

## 在webpack中配置.vue组件页面的解析 ##

1.  运行`cnpm i vue -S`将vue安装为运行依赖；
2.  运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖；
3.  运行`cnpm i style-loader css-loader -D`将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；
4.  在`webpack.config.js`中，添加如下`module`规则：

module: {
    
        rules: [
    
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    
          { test: /\.vue$/, use: 'vue-loader' }
    
        ]
    
      }

1.  创建`App.js`组件页面：

<template>
    
          
    
          <div>
    
            <h1>这是APP组件 - {
       {msg}}</h1>
    
            <h3>我是h3</h3>
    
          </div>
    
        </template>
    
    
    
        <script>
    
        // 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象
    
        export default {
    
          data() {
    
            return {
    
              msg: 'OK'
    
            }
    
          }
    
        }
    
        </script>
    
    
    
        <style scoped>
    
        h1 {
    
          color: red;
    
        }
    
        </style>

1.  创建`main.js`入口文件：

// 导入 Vue 组件
    
        import Vue from 'vue'
    
    
    
        // 导入 App组件
    
        import App from './components/App.vue'
    
    
    
        // 创建一个 Vue 实例，使用 render 函数，渲染指定的组件
    
        var vm = new Vue({
    
          el: '#app',
    
          render: c => c(App)
    
        });

## 在使用webpack构建的Vue项目中使用模板对象？ ##

1.  在`webpack.config.js`中添加`resolve`属性：

resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
      }

## ES6中语法使用总结 ##

1.  使用 `export default` 和 `export` 导出模块中的成员; 对应ES5中的 `module.exports` 和 `export`
2.  使用 `import ** from **` 和 `import '路径'` 还有 `import {a, b} from '模块标识'` 导入其他模块
3.  使用箭头函数：`(a, b)=> { return a-b; }`

## 在vue组件页面中，集成vue-router路由模块 ##

[vue-router官网][vue-router]

1.  导入路由模块：

import VueRouter from 'vue-router'

1.  安装路由模块：

Vue.use(VueRouter);

1.  导入需要展示的组件:

import login from './components/account/login.vue'
    
    import register from './components/account/register.vue'

1.  创建路由对象:

var router = new VueRouter({
    
      routes: [
    
        { path: '/', redirect: '/login' },
    
        { path: '/login', component: login },
    
        { path: '/register', component: register }
    
      ]
    
    });

1.  将路由对象，挂载到 Vue 实例上:

var vm = new Vue({
    
      el: '#app',
    
      // render: c => { return c(App) }
    
      render(c) {
    
        return c(App);
    
      },
    
      router // 将路由对象，挂载到 Vue 实例上
    
    });

1.  改造App.vue组件，在 template 中，添加`router-link`和`router-view`：

<router-link to="/login">登录</router-link>
    
        <router-link to="/register">注册</router-link>
    
    
    
        <router-view></router-view>

## 组件中的css作用域问题 ##

## 抽离路由为单独的模块 ##

## 使用 饿了么的 MintUI 组件 ##

[Github 仓储地址][Github]

[Mint-UI官方文档][Mint-UI]

1.  导入所有MintUI组件：

import MintUI from 'mint-ui'

1.  导入样式表：

import 'mint-ui/lib/style.css'

1.  在 vue 中使用 MintUI：

Vue.use(MintUI)

1.  使用的例子：

<mt-button type="primary" size="large">primary</mt-button>

## 使用 MUI 组件 ##

[官网首页][Link 1]

[文档地址][Link 2]

1.  导入 MUI 的样式表：

import '../lib/mui/css/mui.min.css'

1.  在`webpack.config.js`中添加新的loader规则：

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }

1.  根据官方提供的文档和example，尝试使用相关的组件

## 将项目源码托管到oschina中 ##

1.  点击头像 -> 修改资料 -> SSH公钥 [如何生成SSH公钥][SSH]
2.  创建自己的空仓储，使用 `git config --global user.name "用户名"` 和 `git config --global user.email ***@**.com` 来全局配置提交时用户的名称和邮箱
3.  使用 `git init` 在本地初始化项目
4.  使用 `touch README.md` 和 `touch .gitignore` 来创建项目的说明文件和忽略文件；
5.  使用 `git add .` 将所有文件托管到 git 中
6.  使用 `git commit -m "init project"` 将项目进行本地提交
7.  使用 `git remote add origin 仓储地址`将本地项目和远程仓储连接，并使用origin最为远程仓储的别名
8.  使用 `git push -u origin master` 将本地代码push到仓储中

## App.vue 组件的基本设置 ##

1.  头部的固定导航栏使用 `Mint-UI` 的 `Header` 组件；
2.  底部的页签使用 `mui` 的 `tabbar`;
3.  购物车的图标，使用 `icons-extra` 中的 `mui-icon-extra mui-icon-extra-cart`，同时，应该把其依赖的字体图标文件 `mui-icons-extra.ttf`，复制到 `fonts` 目录下！
4.  将底部的页签，改造成 `router-link` 来实现单页面的切换；
5.  Tab Bar 路由激活时候设置高亮的两种方式：

*  全局设置样式如下：

.router-link-active{
    
         	color:#007aff !important;
    
       }

*  或者在 `new VueRouter` 的时候，通过 `linkActiveClass` 来指定高亮的类：

// 创建路由对象
    
       var router = new VueRouter({
    
         routes: [
    
           { path: '/', redirect: '/home' }
    
         ],
    
         linkActiveClass: 'mui-active'
    
       });

## 实现 tabbar 页签不同组件页面的切换 ##

1.  将 tabbar 改造成 `router-link` 形式，并指定每个连接的 `to` 属性；
2.  在入口文件中导入需要展示的组件，并创建路由对象：

// 导入需要展示的组件
    
        import Home from './components/home/home.vue'
    
        import Member from './components/member/member.vue'
    
        import Shopcar from './components/shopcar/shopcar.vue'
    
        import Search from './components/search/search.vue'
    
    
    
        // 创建路由对象
    
        var router = new VueRouter({
    
          routes: [
    
            { path: '/', redirect: '/home' },
    
            { path: '/home', component: Home },
    
            { path: '/member', component: Member },
    
            { path: '/shopcar', component: Shopcar },
    
            { path: '/search', component: Search }
    
          ],
    
          linkActiveClass: 'mui-active'
    
        });

## 使用 mt-swipe 轮播图组件 ##

1.  假数据：

lunbo: [
    
            'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',
    
            'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',
    
            'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'
    
          ]

1.  引入轮播图组件：

<div class="home-swipe">
    
          <mt-swipe :auto="4000">
    
            <mt-swipe-item v-for="(item, i) in lunbo" :key="i">
    
              <img :src="item" alt="">
    
            </mt-swipe-item>
    
          </mt-swipe>
    
        </div>
    
      </div>

## 在`.vue`组件中使用`vue-resource`获取数据 ##

1.  运行`cnpm i vue-resource -S`安装模块
2.  导入 vue-resource 组件

import VueResource from 'vue-resource'

1.  在vue中使用 vue-resource 组件

Vue.use(VueResource);

[vue-router]: https://router.vuejs.org/
[Github]: https://github.com/ElemeFE/mint-ui
[Mint-UI]: http://mint-ui.github.io/#!/zh-cn
[Link 1]: http://dev.dcloud.net.cn/mui/
[Link 2]: http://dev.dcloud.net.cn/mui/ui/
[SSH]: http://git.mydoc.io/?t=154712