Vue电商实践项目（一）

用户6808043

发布于 2022-02-24 17:16:54

3.2K0

发布于 2022-02-24 17:16:54

文章被收录于专栏：lostfawnlostfawn

今日目标

1.能够说出什么是路由 2.能够说出前端路由的实现原理 3.能够使用Vue-Router实现前端路由 4.能够实现嵌套路由，动态路由 5.能够实现命名路由以及编程式导航 6.理解并实现后台管理案例

1.路由的概念

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现，并完成资源的分发 2).前端路由是依靠hash值(锚链接)的变化进行实现

后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系前端路由主要做的事情就是监听事件并分发执行事件处理函数

2.前端路由的初体验

前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）核心实现依靠一个事件，即监听hash值变化的事件

window.onhashchange = function(){
    //location.hash可以获取到最新的hash值
    location.hash
}

前端路由实现tab栏切换：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <!-- 导入 vue 文件 -->
        <script src="./lib/vue_2.5.22.js"></script>
    </head>
    <body>
        <!-- 被 vue 实例控制的 div 区域 -->
        <div id="app">
        <!-- 切换组件的超链接 -->
        <a href="#/zhuye">主页</a> 
        <a href="#/keji">科技</a> 
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>

        <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
        <!-- 可以把 component 标签当做是【组件的占位符】 -->
        <component :is="comName"></component>
        </div>

        <script>
        // #region 定义需要被切换的 4 个组件
        // 主页组件
        const zhuye = {
            template: '<h1>主页信息</h1>'
        }

        // 科技组件
        const keji = {
            template: '<h1>科技信息</h1>'
        }

        // 财经组件
        const caijing = {
            template: '<h1>财经信息</h1>'
        }

        // 娱乐组件
        const yule = {
            template: '<h1>娱乐信息</h1>'
        }
        // #endregion

        // #region vue 实例对象
        const vm = new Vue({
            el: '#app',
            data: {
            comName: 'zhuye'
            },
            // 注册私有组件
            components: {
            zhuye,
            keji,
            caijing,
            yule
            }
        })
        // #endregion

        // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
        window.onhashchange = function() {
            // 通过 location.hash 获取到最新的 hash 值
            console.log(location.hash);
            switch(location.hash.slice(1)){
            case '/zhuye':
                vm.comName = 'zhuye'
            break
            case '/keji':
                vm.comName = 'keji'
            break
            case '/caijing':
                vm.comName = 'caijing'
            break
            case '/yule':
                vm.comName = 'yule'
            break
            }
        }
        </script>
    </body>
    </html>

案例效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VVZQOOoA-1582445784482)(images/01前端路由.png)]

点击每个超链接之后，会进行相应的内容切换，如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sVZNjd7o-1582445784482)(images/01前端路由效果图.png)]

核心思路：在页面中有一个vue实例对象，vue实例对象中有四个组件，分别是tab栏切换需要显示的组件内容在页面中有四个超链接，如下：

<a href="#/zhuye">主页</a> 
<a href="#/keji">科技</a> 
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>

当我们点击这些超链接的时候，就会改变url地址中的hash值，当hash值被改变时，就会触发onhashchange事件在触发onhashchange事件的时候，我们根据hash值来让不同的组件进行显示：

window.onhashchange = function() {
    // 通过 location.hash 获取到最新的 hash 值
    console.log(location.hash);
    switch(location.hash.slice(1)){
        case '/zhuye':
        //通过更改数据comName来指定显示的组件
        //因为 <component :is="comName"></component> ，组件已经绑定了comName
        vm.comName = 'zhuye'
        break
        case '/keji':
        vm.comName = 'keji'
        break
        case '/caijing':
        vm.comName = 'caijing'
        break
        case '/yule':
        vm.comName = 'yule'
        break
    }
}

###3.Vue Router简介它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。 Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。 Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

Vue Router的特性：支持H5历史模式或者hash模式支持嵌套路由支持路由参数支持编程式路由支持命名路由支持路由导航守卫支持路由过渡动画特效支持路由懒加载支持路由滚动行为

4.Vue Router的使用步骤(★★★)

A.导入js文件

B.添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性， to属性的值会被渲染为#开头的hash地址 User Login C.添加路由填充位（路由占位符） D.定义路由组件 var User = { template:”

This is User

“ }

var Login = { template:”

This is Login

“ }

E.配置路由规则并创建路由实例

var myRouter = new VueRouter({

//routes是路由规则数组

routes:[

//每一个路由规则都是一个对象，对象中至少包含path和component两个属性

//path表示路由匹配的hash地址，component表示路由规则对应要展示的组件对象

{path:”/user”,component:User},

{path:”/login”,component:Login}

]

})

F.将路由挂载到Vue实例中

new Vue({

el:”#app”,

//通过router属性挂载路由对象

router:myRouter

})

小结： Vue Router的使用步骤还是比较清晰的，按照步骤一步一步就能完成路由操作 A.导入js文件 B.添加路由链接 C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示) D.定义路由组件 E.配置路由规则并创建路由实例 F.将路由挂载到Vue实例中

补充：路由重定向：可以通过路由重定向为页面设置默认展示的组件在路由规则中添加一条路由规则即可，如下： var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可 { path:”/“,redirect:”/user”}, { path: “/user”, component: User }, { path: “/login”, component: Login } ] })

5.嵌套路由，动态路由的实现方式

A.嵌套路由的概念(★★★)

当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。

嵌套路由最关键的代码在于理解子级路由的概念：比如我们有一个/login的路由那么/login下面还可以添加子级路由，如: /login/account /login/phone

参考代码如下：

var User = { template: "<div>This is User</div>" }
//Login组件中的模板代码里面包含了子级路由链接以及子级路由的占位符
    var Login = { template: `<div>
        <h1>This is Login</h1>
        <hr>
        <router-link to="/login/account">账号密码登录</router-link>
        <router-link to="/login/phone">扫码登录</router-link>
        <!-- 子路由组件将会在router-view中显示 -->
        <router-view></router-view>
        </div>` }

    //定义两个子级路由组件
    var account = { template:"<div>账号：<input><br>密码：<input></div>"};
    var phone = { template:"<h1>扫我二维码</h1>"};
    var myRouter = new VueRouter({
        //routes是路由规则数组
        routes: [
            { path:"/",redirect:"/user"},
            { path: "/user", component: User },
            { 
                path: "/login", 
                component: Login,
                //通过children属性为/login添加子路由规则
                children:[
                    { path: "/login/account", component: account },
                    { path: "/login/phone", component: phone },
                ]
            }
        ]
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router:myRouter
    });

页面效果大致如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jET0XBWO-1582445784483)(images/03嵌套路由.png)]

B.动态路由匹配(★★★)

var User = { template:”

用户：

“}

var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过/:参数名的形式传递参数 { path: “/user/:id”, component: User },

})

补充：如果使用$route.params.id来获取路径传参的数据不够灵活。 1.我们可以通过props来接收参数 var User = { props:[“id”], template:”

用户：{{id}}

“

}

var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过/:参数名的形式传递参数 //如果props设置为true，route.params将会被设置为组件属性 { path: “/user/:id”, component: User,props:true },

})

2.还有一种情况，我们可以将props设置为对象，那么就直接将对象的数据传递给组件进行使用 var User = { props:[“username”,”pwd”], template:”

用户：—

“

}

var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过/:参数名的形式传递参数 //如果props设置为对象，则传递的是对象中的数据给组件 { path: “/user/:id”, component: User,props:{username:”jack”,pwd:123} },

})

3.如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式。 var User = { props:[“username”,”pwd”,”id”], template:”

用户：{{id}} -> {{username}}—{{pwd}}

“

}

var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过/:参数名的形式传递参数 //如果props设置为函数，则通过函数的第一个参数获取路由对象 //并可以通过路由对象的params属性获取传递的参数 // { path: “/user/:id”, component: User,props:(route)=>{ return {username:”jack”,pwd:123,id:route.params.id} } },

})

7.命名路由以及编程式导航

A.命名路由：给路由取别名

案例：

var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过name属性为路由添加一个别名 { path: “/user/:id”, component: User, name:”user”},

})

//添加了别名之后，可以使用别名进行跳转 User User

//还可以编程式导航 myRouter.push( { name:’user’ , params: {id:123} } )

B.编程式导航(★★★)

页面导航的两种方式： A.声明式导航：通过点击链接的方式实现的导航 B.编程式导航：调用js的api方法实现导航

Vue-Router中常见的导航方式：this.router.push(“hash地址”);this.router.push(“/login”);this.router.push({ name:’user’ , params: {id:123} });this.router.push({ path:”/login” });this.

this.router.go( n );//n为数字，参考history.gothis.router.go( -1 );

8.实现后台管理案例(★★★)

案例效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X4HJNENz-1582445784483)(images/02后台管理系统.png)]

点击左侧的”用户管理”,”权限管理”,”商品管理”,”订单管理”,”系统设置”都会出现对应的组件并展示内容

其中”用户管理”组件展示的效果如上图所示，在用户管理区域中的详情链接也是可以点击的，点击之后将会显示用户详情信息。

案例思路： 1).先将素材文件夹中的11.基于vue-router的案例.html复制到我们自己的文件夹中。看一下这个文件中的代码编写了一些什么内容，这个页面已经把后台管理页面的基本布局实现了 2).在页面中引入vue，vue-router 3).创建Vue实例对象，准备开始编写代码实现功能 4).希望是通过组件的形式展示页面的主体内容，而不是写死页面结构，所以我们可以定义一个根组件：

//只需要把原本页面中的html代码设置为组件中的模板内容即可
const app = {
    template:`<div>
        <!-- 头部区域 -->
        <header class="header">传智后台管理系统</header>
        <!-- 中间主体区域 -->
        <div class="main">
          <!-- 左侧菜单栏 -->
          <div class="content left">
            <ul>
              <li>用户管理</li>
              <li>权限管理</li>
              <li>商品管理</li>
              <li>订单管理</li>
              <li>系统设置</li>
            </ul>
          </div>
          <!-- 右侧内容区域 -->
          <div class="content right">
            <div class="main-content">添加用户表单</div>
          </div>
        </div>
        <!-- 尾部区域 -->
        <footer class="footer">版权信息</footer>
      </div>`
  }

5).当我们访问页面的时候，默认需要展示刚刚创建的app根组件，我们可以创建一个路由对象来完成这个事情,然后将路由挂载到Vue实例对象中即可

const myRouter = new VueRouter({
    routes:[
        {path:"/",component:app}
    ]
})

const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter
})

补充：到此为止，基本的js代码都处理完毕了，我们还需要设置一个路由占位符

<body>
  <div id="app">
    <router-view></router-view>
  </div>
</body>

6).此时我们打开页面应该就可以得到一个VueRouter路由出来的根组件了我们需要在这个根组件中继续路由实现其他的功能子组件先让我们更改根组件中的模板：更改左侧li为子级路由链接，并在右侧内容区域添加子级组件占位符

const app = {
    template:`<div>
        ........
        <div class="main">
          <!-- 左侧菜单栏 -->
          <div class="content left">
            <ul>
              <!-- 注意：我们把所有li都修改为了路由链接 -->
              <li><router-link to="/users">用户管理</router-link></li>
              <li><router-link to="/accesses">权限管理</router-link></li>
              <li><router-link to="/goods">商品管理</router-link></li>
              <li><router-link to="/orders">订单管理</router-link></li>
              <li><router-link to="/systems">系统设置</router-link></li>
            </ul>
          </div>
          <!-- 右侧内容区域 -->
          <div class="content right">
            <div class="main-content">
                <!-- 在 -->
                <router-view></router-view> 
            </div>
          </div>
        </div>
        .......
      </div>`
  }

然后，我们要为子级路由创建并设置需要显示的子级组件

//建议创建的组件首字母大写，和其他内容区分
const Users = {template:`<div>
    <h3>用户管理</h3>
</div>`}
const Access = {template:`<div>
    <h3>权限管理</h3>
</div>`}
const Goods = {template:`<div>
    <h3>商品管理</h3>
</div>`}
const Orders = {template:`<div>
    <h3>订单管理</h3>
</div>`}
const Systems = {template:`<div>
    <h3>系统管理</h3>
</div>`}

//添加子组件的路由规则
const myRouter = new VueRouter({
    routes:[
        {path:"/",component:app , children:[
            { path:"/users",component:Users },
            { path:"/accesses",component:Access },
            { path:"/goods",component:Goods },
            { path:"/orders",component:Orders },
            { path:"/systems",component:Systems },
        ]}
    ]
})

const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter
})

7).展示用户信息列表： A.为Users组件添加私有数据,并在模板中循环展示私有数据 const Users = { data(){ return { userList:[ {id:1,name:"zs",age:18}, {id:2,name:"ls",age:19}, {id:3,name:"wang",age:20}, {id:4,name:"jack",age:21}, ] } }, template:`<div> <h3>用户管理</h3> <table> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr :key="item.id" v-for="item in userList"> <td></td> <td></td> <td></td> <td><a href="javascript:;">详情</a></td> </tr> </tbody> </table> </div>`}

8.当用户列表展示完毕之后，我们可以点击列表中的详情来显示用户详情信息，首先我们需要创建一个组件，用来展示详情信息

const UserInfo = {
    props:["id"],
    template:`<div>
      <h5>用户详情</h5>
      <p>查看 {{id}} 号用户信息</p>
      <button @click="goBack">返回用户详情页</button>
    </div> `,
    methods:{
      goBack(){
        //当用户点击按钮，后退一页
        this.$router.go(-1);
      }
    }
  }

然后我们需要设置这个组件的路由规则

const myRouter = new VueRouter({
    routes:[
        {path:"/",component:app , children:[
            { path:"/users",component:Users },
            //添加一个/userinfo的路由规则
            { path:"/userinfo/:id",component:UserInfo,props:true},
            { path:"/accesses",component:Access },
            { path:"/goods",component:Goods },
            { path:"/orders",component:Orders },
            { path:"/systems",component:Systems },
        ]}
    ]
})

const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter
})

再接着给用户列表中的详情a连接添加事件

const Users = {
    data(){
        return {
            userList:[
                {id:1,name:"zs",age:18},
                {id:2,name:"ls",age:19},
                {id:3,name:"wang",age:20},
                {id:4,name:"jack",age:21},
            ]
        }
    },
    template:`<div>
        <h3>用户管理</h3>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr :key="item.id" v-for="item in userList">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td><a href="javascript:;" @click="goDetail(item.id)">详情</a></td>
                </tr>
            </tbody>
        </table>
    </div>`,
    methods:{
        goDetail(id){
            this.$router.push("/userinfo/"+id);
        }
    }
}

今日目标

1.能够了解模块化的相关规范 2.了解webpack 3.了解使用Vue单文件组件 4.能够搭建Vue脚手架 5.掌握Element-UI的使用

1.模块化的分类

A.浏览器端的模块化

    1).AMD(Asynchronous Module Definition,异步模块定义)
    代表产品为：Require.js
    2).CMD(Common Module Definition,通用模块定义)
    代表产品为：Sea.js

B.服务器端的模块化

    服务器端的模块化规范是使用CommonJS规范：
    1).使用require引入其他模块或者包
    2).使用exports或者module.exports导出模块成员
    3).一个文件就是一个模块，都拥有独立的作用域

C.ES6模块化

    ES6模块化规范中定义：
        1).每一个js文件都是独立的模块
        2).导入模块成员使用import关键字
        3).暴露模块成员使用export关键字

小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.

2.在NodeJS中安装babel

A.安装babel

打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill

B.创建babel.config.js

在项目目录中创建babel.config.js文件。
编辑js文件中的代码如下：
    const presets = [
        ["@babel/env",{
            targets:{
                edge:"17",
                firefox:"60",
                chrome:"67",
                safari:"11.1"
            }
        }]
    ]
    //暴露
    module.exports = { presets }

C.创建index.js文件

在项目目录中创建index.js文件作为入口文件
在index.js中输入需要执行的js代码，例如：
    console.log("ok");

D.使用npx执行文件

打开终端，输入命令：npx babel-node ./index.js

3.设置默认导入/导出

A.默认导出

export default {
    成员A,
    成员B,
    .......
},如下：
let num = 100;
export default{
    num
}

B.默认导入

import 接收名称 from "模块标识符"，如下：
import test from "./test.js"

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象

###4.设置按需导入/导出 ####A.按需导出 export let num = 998; export let myName = “jack”; export function fn = function(){ console.log(“fn”) } ####B.按需导入 import { num,fn as printFn ,myName } from “./test.js” //同时导入默认导出的成员以及按需导入的成员 import test,{ num,fn as printFn ,myName } from “./test.js” 注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出

5.直接导入并执行代码

import "./test2.js";

6.webpack的概念

webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。 webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

###7.webpack的基本使用 ####A.创建项目目录并初始化创建项目，并打开项目所在目录的终端，输入命令： npm init -y ####B.创建首页及js文件在项目目录中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li 在项目目录中创建js文件夹，并在文件夹中创建index.js文件

C.安装jQuery

打开项目目录终端，输入命令:
npm install jQuery -S

D.导入jQuery

打开index.js文件，编写代码导入jQuery并实现功能：
import $ from "jquery";
$(function(){
    $("li:odd").css("background","cyan");
    $("li:odd").css("background","pink");
})

注意：此时项目运行会有错误，因为import $ from “jquery”;这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题所以我们需要webpack来帮助我们解决这个问题。

E.安装webpack

1).打开项目目录终端，输入命令:
npm install webpack webpack-cli -D
2).然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack
在 webpack.config.js 文件中编写代码进行webpack配置，如下：
module.exports = {
    mode:"development"//可以设置为development(开发模式)，production(发布模式)
}
补充：mode设置的是项目的编译模式。
如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些
如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些
3).修改项目中的package.json文件添加运行脚本dev，如下：
"scripts":{
    "dev":"webpack"
}
注意：scripts节点下的脚本，可以通过 npm run 运行，如：
运行终端命令：npm run dev
将会启动webpack进行项目打包
4).运行dev命令进行项目打包，并在页面中引入项目打包生成的js文件
打开项目目录终端，输入命令:
npm run dev
等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。
浏览页面查看效果。

8.设置webpack的打包入口/出口

在webpack 4.x中，默认会将src/index.js 作为默认的打包入口js文件
                 默认会将dist/main.js 作为默认的打包输出js文件
如果不想使用默认的入口/出口js文件，我们可以通过改变 webpack.config.js 来设置入口/出口的js文件，如下：
const path = require("path");
module.exports = {
    mode:"development",
    //设置入口文件路径
    entry: path.join(__dirname,"./src/xx.js"),
    //设置出口文件
    output:{
        //设置路径
        path:path.join(__dirname,"./dist"),
        //设置文件名
        filename:"res.js"
    }
}

9.设置webpack的自动打包

默认情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，才能生成出口的js文件
那么每次都要重新执行命令打包，这是一个非常繁琐的事情，那么，自动打包可以解决这样繁琐的操作。
实现自动打包功能的步骤如下：
    A.安装自动打包功能的包:webpack-dev-server
        npm install webpack-dev-server -D
    B.修改package.json中的dev指令如下：
        "scripts":{
            "dev":"webpack-dev-server"
        }
    C.将引入的js文件路径更改为：<script src="/bundle.js"></script>
    D.运行npm run dev，进行打包
    E.打开网址查看效果：http://localhost:8080

注意：webpack-dev-server自动打包的输出文件，默认放到了服务器的根目录中.

补充：在自动打包完毕之后，默认打开服务器网页，实现方式就是打开package.json文件，修改dev命令： “dev”: “webpack-dev-server –open –host 127.0.0.1 –port 9999”

10.配置html-webpack-plugin

使用html-webpack-plugin 可以生成一个预览页面。
因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面
还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。
实现默认预览页面功能的步骤如下：
    A.安装默认预览功能的包:html-webpack-plugin
        npm install html-webpack-plugin -D
    B.修改webpack.config.js文件，如下：
        //导入包
        const HtmlWebpackPlugin = require("html-webpack-plugin");
        //创建对象
        const htmlPlugin = new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
            template:"./src/index.html",
            //设置生成的预览页面名称
            filename:"index.html"
        })
    C.继续修改webpack.config.js文件，添加plugins信息：
        module.exports = {
            ......
            plugins:[ htmlPlugin ]
        }

11.webpack中的加载器

通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包
    loader加载器包含：
        1).less-loader
        2).sass-loader
        3).url-loader:打包处理css中与url路径有关的文件
        4).babel-loader:处理高级js语法的加载器
        5).postcss-loader
        6).css-loader,style-loader

注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用

A.安装style-loader,css-loader来处理样式文件
    1).安装包
        npm install style-loader css-loader -D
    2).配置规则：更改webpack.config.js的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                }
            ]
        }
    }
B.安装less,less-loader处理less文件
    1).安装包
        npm install less-loader less -D
    2).配置规则：更改webpack.config.js的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }
    }
C.安装sass-loader,node-sass处理less文件
    1).安装包
        npm install sass-loader node-sass -D
    2).配置规则：更改webpack.config.js的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
    }

    补充：安装sass-loader失败时，大部分情况是因为网络原因，详情参考：
    https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

D.安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）
1).安装包
    npm install postcss-loader autoprefixer -D
2).在项目根目录创建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}
3).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

E.打包样式表中的图片以及字体文件
在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
使用url-loader和file-loader来处理打包图片文件以及字体文件
1).安装包
    npm install url-loader file-loader -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

F.打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法
有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包
A.安装babel转换器
    npm install babel-loader @babel/core @babel/runtime -D
B.安装babel语法插件包
    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在项目根目录创建并配置babel.config.js文件

    module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }
D.配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

12.Vue单文件组件

传统Vue组件的缺陷：全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中) 没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）解决方案：使用Vue单文件组件，每个单文件组件的后缀名都是.vue 每一个Vue单文件组件都由三部分组成 1).template组件组成的模板区域 2).script组成的业务逻辑区域 3).style样式区域

代码如下：

<template>

    组件代码区域

</template>

<script>

    js代码区域

</script>

<style scoped>

    样式代码区域

</style>

补充：安装Vetur插件可以使得.vue文件中的代码高亮

配置.vue文件的加载器 A.安装vue组件的加载器 npm install vue-loader vue-template-compiler -D B.配置规则：更改webpack.config.js的module中的rules数组 const VueLoaderPlugin = require(“vue-loader/lib/plugin”); const vuePlugin = new VueLoaderPlugin(); module.exports = { …… plugins:[ htmlPlugin, vuePlugin ], module : { rules:[ …//其他规则 { test:/.vue$/, loader:”vue-loader”,

13.在webpack中使用vue

上一节我们安装处理了vue单文件组件的加载器，想要让vue单文件组件能够使用，我们必须要安装vue 并使用vue来引用vue单文件组件。 A.安装Vue npm install vue -S B.在index.js中引入vue：import Vue from “vue” C.创建Vue实例对象并指定el，最后使用render函数渲染单文件组件 const vm = new Vue({ el:”#first”, render:h=>h(app) })

14.使用webpack打包发布项目

在项目上线之前，我们需要将整个项目打包并发布。 A.配置package.json “scripts”:{ “dev”:”webpack-dev-server”, “build”:”webpack -p” } B.在项目打包之前，可以将dist目录删除，生成全新的dist目录

15.Vue脚手架

Vue脚手架可以快速生成Vue项目基础的架构。 A.安装3.x版本的Vue脚手架： npm install -g @vue/cli B.基于3.x版本的脚手架创建Vue项目： 1).使用命令创建Vue项目命令：vue create my-project 选择Manually select features(选择特性以创建项目) 勾选特性可以用空格进行勾选。是否选用历史模式的路由：n ESLint选择：ESLint + Standard config 何时进行ESLint语法校验：Lint on save babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置) 是否保存为模板：n 使用哪个工具安装包：npm 2).基于ui界面创建Vue项目命令：vue ui 在自动打开的创建项目网页中配置项目信息。 3).基于2.x的旧模板，创建Vue项目 npm install -g @vue/cli-init vue init webpack my-project

C.分析Vue脚手架生成的项目结构 node_modules:依赖包目录 public：静态资源目录 src：源码目录 src/assets:资源目录 src/components：组件目录 src/views:视图组件目录 src/App.vue:根组件 src/main.js:入口js src/router.js:路由js babel.config.js:babel配置文件 .eslintrc.js:

16.Vue脚手架的自定义配置

A.通过 package.json 进行配置 [不推荐使用]
    "vue":{
        "devServer":{
            "port":"9990",
            "open":true
        }
    }
B.通过单独的配置文件进行配置，创建vue.config.js
    module.exports = {
        devServer:{
            port:8888,
            open:true
        }
    }

17.Element-UI的基本使用

Element-UI:一套基于2.0的桌面端组件库官网地址：http://element-cn.eleme.io/#/zh-CN A.安装： npm install element-ui -S B.导入使用： import ElementUI from “element-ui”; import “element-ui/lib/theme-chalk/index.css”;

Vue.use(ElementUI)

今日目标

1.初始化项目 2.基于Vue技术栈进行项目开发 3.使用Vue的第三方组件进行项目开发 4.理解前后端分离开发模式

1.电商业务概述

客户使用的业务服务：PC端，小程序，移动web，移动app 管理员使用的业务服务：PC后台管理端。 PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计电商后台管理系统采用前后端分离的开发模式前端项目是基于Vue的SPA（单页应用程序）项目

前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts 后端技术栈：Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)

2.项目初始化

A.安装Vue脚手架 B.通过脚手架创建项目 C.配置路由 D.配置Element-UI:在插件中安装，搜索vue-cli-plugin-element E.配置Axios：在依赖中安装,搜索axios(运行依赖) F.初始化git仓库 G.将本地项目托管到github或者码云中

3.码云相关操作

A.注册登录码云账号 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G8sAtWwQ-1582446247931)(images/注册码云.jpg)]

B.安装git 在Windows上使用Git，可以从Git官网直接下载安装程序进行安装。测试命令：git –version

C.点击网站右上角“登录”，登录码云，并进行账号设置 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NeXK5n3u-1582446247931)(images/码云点击设置.jpg)]

D.在本地创建公钥：在终端运行：ssh-keygen -t rsa -C “xxx@xxx.com“ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X4DTNc0j-1582446247932)(images/创建公钥.jpg)] E.找到公钥地址： Your identification has been saved in /c/Users/My/.ssh/id_rsa. Your public key has been saved in /c/Users/My/.ssh/id_rsa.pub. 当我们创建公钥完毕之后，请注意打印出来的信息“Your public key has been saved in” /c/Users/My/.ssh/id_rsa.pub : c盘下面的Users下面的My下面的.ssh下面的id_rsa.pub就是我们创建好的公钥了

E.打开id_rsa.pub文件，复制文件中的所有代码，点击码云中的SSH公钥，将生成的公钥复制到公钥中 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FouzFPFX-1582446247932)(images/pub文件.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VogcyxDg-1582446247932)(images/ssh公钥.jpg)] G.测试公钥：打开终端，输入命令 ssh -T git@gitee.com [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d2XtBa4E-1582446247933)(images/success.jpg)]

H.将本地代码托管到码云中点击码云右上角的+号->新建仓库 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ciJtFXgg-1582446247933)(images/新建仓库.jpg)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JOfUWo5h-1582446247933)(images/创建仓库2.jpg)]

I.进行git配置： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OLPwOz2J-1582446247934)(images/config.jpg)] 打开项目所在位置的终端，进行git仓库关联 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PSjCYV6d-1582446247934)(images/项目终端执行关联.jpg)]

4.配置后台项目

A.安装phpStudy并导入mysql数据库数据 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1RoLLmvp-1582446247935)(images/phpStudy.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6DWr57fm-1582446247935)(images/mysql.jpg)] B.安装nodeJS，配置后台项目,从终端打开后台项目vue_api_server 然后在终端中输入命令安装项目依赖包：npm install

C.使用postman测试api接口 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y4YMsASa-1582446247935)(images/postman.jpg)]

5.实现登录功能

A.登录状态保持如果服务器和客户端同源，建议可以使用cookie或者session来保持登录状态如果客户端和服务器跨域了，建议使用token进行维持登录状态。

B.登录逻辑：在登录页面输入账号和密码进行登录，将数据发送给服务器服务器返回登录的结果，登录成功则返回数据中带有token 客户端得到token并进行保存，后续的请求都需要将此token发送给服务器，服务器会验证token以保证用户身份。

C.添加新分支login，在login分支中开发当前项目vue_shop：打开vue_shop终端，使用git status确定当前项目状态。确定当前工作目录是干净的之后，创建一个分支进行开发，开发完毕之后将其合并到master git checkout -b login 然后查看新创建的分支：git branch 确定我们正在使用login分支进行开发 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DBEoHTma-1582446247936)(images/branch.jpg)]

然后执行vue ui命令打开ui界面，然后运行serve，运行app查看当前项目效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2kGF0qOe-1582446247936)(images/ui界面启动项目.jpg)]

发现现在是一个默认页面，我们需要进行更改，打开项目的src目录，点击main.js文件（入口文件）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

Vue.config.productionTip = false


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

再打开App.vue(根组件)，将根组件的内容进行操作梳理(template中留下根节点，script中留下默认导出，去掉组件，style中去掉所有样式)

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

<script>
export default {
  name: 'app'
}
</script>

<style>
</style>

再打开router.js(路由)，将routes数组中的路由规则清除，然后将views删除，将components中的helloworld.vue删除

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [

  ]
})

在components文件夹中新建Login.vue组件,添加template，script，style标签,style标签中的scoped可以防止组件之间的样式冲突，没有scoped则样式是全局的

<template>
    <div class="login_container">

    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b5b6b;
  height: 100%;
}

</style>

在router.js中导入组件并设置规则在App.vue中添加路由占位符

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }
  ]
})

当我们给Login.vue中的内容添加样式的时候，会报错“缺少less-loader”，需要配置less加载器（开发依赖），安装less(开发依赖) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ku1zEwX9-1582446247936)(images/less.jpg)] 然后需要添加公共样式，在assets文件夹下面添加css文件夹，创建global.css文件,添加全局样式

/* 全局样式表 */
html,body,#app{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0; 
}

在main.js中导入global.css，使得全局样式生效 import “./assets/css/global.css” 然后Login.vue中的根元素也需要设置撑满全屏（height:100%）最终Login.vue文件中的代码如下

<template>
    <div class="login_container">
        <!-- 登录盒子  -->
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                <img src="../assets/logo.png" alt="">
            </div>
            <!-- 登录表单 -->
            <el-form :model="loginForm" ref="LoginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" ></el-input>
                </el-form-item> 
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
                </el-form-item> 
                <!-- 按钮 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item> 
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      //数据绑定
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      //表单验证规则
      loginFormRules: {
        username: [
          { required: true, message: '请输入登录名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '登录名长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  //添加行为，
  methods: {
    //添加表单重置方法
    resetLoginForm() {
      //this=>当前组件对象，其中的属性$refs包含了设置的表单ref
      //   console.log(this)
      this.$refs.LoginFormRef.resetFields()
    },
    login() {
      //点击登录的时候先调用validate方法验证表单内容是否有误
      this.$refs.LoginFormRef.validate(async valid => {
        console.log(this.loginFormRules)
        //如果valid参数为true则验证通过
        if (!valid) {
          return
        }

        //发送请求进行登录
        const { data: res } = await this.$http.post('login', this.loginForm)
        //   console.log(res);
        if (res.meta.status !== 200) {
          return this.$message.error('登录失败:' + res.meta.msg) //console.log("登录失败:"+res.meta.msg)
        }

        this.$message.success('登录成功')
        console.log(res)
        //保存token
        window.sessionStorage.setItem('token', res.data.token)
        // 导航至/home
        this.$router.push('/home')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b5b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 300px;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
</style>

其中我们有用到一下内容，需要进行进一步处理：

A.添加element-ui的表单组件在plugins文件夹中打开element.js文件，进行elementui的按需导入 import Vue from ‘vue’ import { Button } from ‘element-ui’ import { Form, FormItem } from ‘element-ui’ import { Input } from ‘element-ui’

Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input)

B.添加第三方字体复制素材中的fonts文件夹到assets中,在入口文件main.js中导入import ‘./assets/fonts/iconfont.css’ 然后直接在接着添加登录盒子

C.添加表单验证的步骤 1).给添加属性:rules=”rules”，rules是一堆验证规则，定义在script、中 2).在script中添加rules：export default{ data(){return{……, rules: { name: [ { required: true, message: ‘请输入活动名称’, trigger: ‘blur’ }, { min: 3, max: 5, message: ‘长度在 3 到 5 个字符’, trigger: ‘blur’ } ], region: [ { required: true, message: ‘请选择活动区域’, trigger: ‘change’ } ] }…… 3).通过的prop属性设置验证规则

4.导入axios以发送ajax请求打开main.js，import axios from ‘axios’; 设置请求的根路径：axios.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/'; 挂载axios：Vue.prototype.$http = axios;

5.配置弹窗提示：在plugins文件夹中打开element.js文件，进行elementui的按需导入import {Message} from ‘element-ui’进行全局挂载：Vue.prototype.message = Message;在login.vue组件中编写弹窗代码：this.message.error(‘登录失败’)

6.登录成功之后的操作

A.登录成功之后，需要将后台返回的token保存到sessionStorage中操作完毕之后，需要跳转到/home

login() {
      //点击登录的时候先调用validate方法验证表单内容是否有误
      this.$refs.LoginFormRef.validate(async valid => {
        console.log(this.loginFormRules)
        //如果valid参数为true则验证通过
        if (!valid) {
          return
        }

        //发送请求进行登录
        const { data: res } = await this.$http.post('login', this.loginForm)
        //   console.log(res);
        if (res.meta.status !== 200) {
          return this.$message.error('登录失败:' + res.meta.msg) //console.log("登录失败:"+res.meta.msg)
        }

        this.$message.success('登录成功')
        console.log(res)
        //保存token
        window.sessionStorage.setItem('token', res.data.token)
        // 导航至/home
        this.$router.push('/home')
      })
    }

添加一个组件Home.vue，并为之添加规则

<template>
    <div>
        this is home
        <el-button type="info" @click="logout"> 退出 </el-button>
    </div>
</template>

<script>
export default {
  methods: {
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>

<style lang='less' scoped>
</style>

添加路由规则

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
})

添加路由守卫如果用户没有登录，不能访问/home,如果用户通过url地址直接访问，则强制跳转到登录页面打开router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    { path:'/', redirect:'/login'},
    { path:'/login' , component:Login },
    { path:'/home' , component:Home}
  ]
})

//挂载路由导航守卫,to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作
router.beforeEach((to,from,next)=>{ 
  if(to.path === '/login')
    return next();

  //获取token
  const tokenStr = window.sessionStorage.getItem('token');

  if(!tokenStr)
    return next('/login');

  next();

})

export default router

实现退出功能在Home组件中添加一个退出功能按钮,给退出按钮添加点击事件，添加事件处理代码如下：

export default {
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push('/login');
        }
    }
}

补充

A.处理ESLint警告打开脚手架面板，查看警告信息 [图片] 默认情况下，ESLint和vscode格式化工具有冲突，需要添加配置文件解决冲突。在项目根目录添加 .prettierrc 文件

{
    "semi":false,
    "singleQuote":true
}

打开.eslintrc.js文件，禁用对 space-before-function-paren 的检查:

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'space-before-function-paren' : 0
  },

B.合并按需导入的element-ui

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
// 进行全局挂载：
Vue.prototype.$message = Message

C.将代码提交到码云新建一个项目终端,输入命令‘git status’查看修改过的与新增的文件内容将所有文件添加到暂存区：git add . 将所有代码提交到本地仓库：git commit -m “添加登录功能以及/home的基本结构” 查看分支： git branch 发现所有代码都被提交到了login分支将login分支代码合并到master主分支，先切换到master：git checkout master 在master分支进行代码合并：git merge login 将本地的master推送到远端的码云：git push

推送本地的子分支到码云，先切换到子分支：git checkout 分支名然后推送到码云：git push -u origin 远端分支名

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-4-24，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！