2024年Web前端最新【狂神说Java】Vue最新快速上手教程通俗易懂，大数据高频面试题_vue-cli5 单元测试

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Yes

No

---

4.3 v-if-else

• v-if

• v-else-if

• v-else

注：===三个等号在JS中表示绝对等于(就是数据与类型都要相等)

A

B

CA

D

E

---

4.4 v-for

格式

• {{item.message}}—{{index}}

  注：items是数组，item是数组元素迭代的别名。

  ---

• {{item.message}}-{{index}}

  ---

  

  ---

  5、Vue绑定事件

  ---

  5.1v-on监听事件

  事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件， 可以绑定到Vue中的methods中的方法事件!

  绑定

  ---

  6、Vue双向绑定

  ---

  6.1什么是双向数据绑定

  Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

  值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex那么数据流也是单项的，这时就会和双向数据绑定有冲突。

  6.2为什么要实现数据的双向绑定

  在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

  6.3在表单中使用双向数据绑定

  你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

  注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

  （1）单行数据

  输入的文本：{{message}}

  

  ---

  （2）多行数据

  输入的文本：

  {{message}}

  

  ---

  （3） 单选

  男

  女

  选中了谁：{{xy}}

  

  ---

  （4） 复选

  多复选框：

    

  Jack1号

    

  Jack2号

    

  Mike

  选中的值：{{checkedNames}}

  

  ---

  （5）下拉选择

  下拉框:

  ---请选择--- A B C D

  value:{{pan}}

  

  注意：v-model表达式的初始值未能匹配任何选项，元系将被渲染为“未选中”状态。 在iOS中， 这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

  ---

  7、Vue组件

  ---

  7.1什么是组件

  组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板， 跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织：

  

  

  

  例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

  ---

  （1）第一个Vue组件

  注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建，vue模板文件的方式开发，以下方法只是为了让大家理解什么是组件。

  使用Vue.component()方法注册组件，格式如下：

  说明：

  • Vue.component()：注册组件

  • pan：自定义组件的名字

  • template：组件的模板

  ---

  （2）使用props属性传递参数

  像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用props属性了！

  注意：默认规则下props属性里的值不能为大写；

  结果：

  

  说明：

  v-for=“item in items”：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件

  v-bind:panh=“item”：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的panh为props定义的属性名，右边的为item in items 中遍历的item项的值

  ---

  8、Axios 异步通讯

  ---

  8.1什么是Axios

  Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她的主要作用就是实现AJAX异步通信，其功能特点如下：

  • 从浏览器中创建XMLHttpRequests

  • 从node.js创建http请求

  • 支持Promise API[JS中链式编程]

  • 拦截请求和响应

  • 转换请求数据和响应数据

  • 取消请求

  • 自动转换JSON数据

  • 客户端支持防御XSRF(跨站请求伪造)

  GitHub：https://github.com/axios/axios

  中文文档：http://www.axios-js.com/

  ---

  8.2为什么要使用Axios

  由于Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能， 为了解决通信问题， 作者单独开发了一个名为vue-resource的插件， 不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery， 因为它操作Dom太频繁!

  ---

  8.3第一个Axios应用程序

  咱们开发的接口大部分都是采用JSON格式， 可以先在项目里模拟一段JSON数据， 数据内容如下：创建一个名为data.json的文件并填入上面的内容， 放在项目的根目录下

  {

  “name”: “闲言博客”,

  “url”: “https://blog.csdn.net/qq_42025798”,

  “page”: 1,

  “isNonProfit”: true,

  “address”: {

  “street”: “含光门”,

  “city”: “陕西西安”,

  “country”: “中国”

  },

  “links”: [

  {

  “name”: “bilibili”,

  “url”: “https://space.bilibili.com/95256449”

  },

  {

  “name”: “闲言杂货簿”,

  “url”: “https://blog.csdn.net/qq_42025798”

  },

  {

  “name”: “闲言小店”,

  “url”: “https://blog.csdn.net/qq_42025798”

  }

  ]

  }

  测试代码

  {{info.name}}
  {{info.address.street}}

  点我

  结果：

  

  说明：

  • 在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定

  • 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中

  • 我们在data中的数据结构必须和Ajax响应回来的数据格式匹配！

  ---

  8.3Vue的生命周期

  官方文档：https://cn.vuejs.org/v2/guide/instance.html

  Vue实例有一个完整的生命周期，也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

  在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。

  

  ---

  9、计算属性、内容分发、自定义事件

  ---

  9.1什么是计算属性

  计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

  代码：

  currentTime1:{{currentTime1()}}

  currentTime2:{{currentTime2}}

  

  注意：methods和computed里的东西不能重名

  说明：

  • methods：定义方法， 调用方法使用currentTime1()， 需要带括号

  • computed：定义计算属性， 调用属性使用currentTime2， 不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化

  • 如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message=”x in yan"， 改变下数据的值，再次测试观察效果!

  结论：

  调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

  ---

  9.2内容分发

  在Vue.js中我们使用<slot>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中；

  测试

  比如准备制作一个待办事项组件(todo) ， 该组件由待办标题(todo-title) 和待办内容(todo-items)组成，但这三个组件又是相互独立的，该如何操作呢?

  第一步定义一个待办事项的组件

  ---

  第二步 我们需要让，代办事项的标题和值实现动态绑定，怎么做呢？我们可以留一个插槽！

  1-将上面的代码留出一个插槽，即slot

  Vue.component(‘todo’,{

  template:'

  \

  \

  • \

  \

  \ '

  });

  ---

  Vue.component(‘todo-title’,{

  props:[‘title’],

  template:‘

  {{title}}
  ’

  });

  Vue.component(“todo-items”,{

  props:[“item”],

  template:“

• {{item}}
• ”

  });

  ---

  3-实例化Vue并初始化数据

  var vm = new Vue({

  el:“#app”,

  data:{

  title:“闲言”,

  todoItems:[‘Java’,‘Php’,‘C#’]

  }

  });

  ---

  说明：我们的todo-title和todo-items组件分别被分发到了todo组件的todo-title和todo-items插槽中

  ---

  ---

  9.3自定义事件

  通以上代码不难发现，数据项在Vue的实例中， 但删除操作要在组件中完成， 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题； 使用this.$emit(‘自定义事件名’， 参数) ， 操作过程如下：

  1-在vue的实例中增加了methods对象并定义了一个名为removeItems的方法

  var vm = new Vue({

  el:“#app”,

  data:{

  title:“闲言”,

  todoItems:[‘Java’,‘Php’,‘C#’]

  },

  methods:{

  removeItems: function(index){

  this.todoItems.splice(index,1);

  }

  }

  });

  ---

  2-修改todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件！

  Vue.component(“todo-items”,{

  props:[‘item’,‘index’],

  //只能绑定绑定当前组件的方法

  template:‘

• {{index}}–{{item}}<button @click=“remove”>删除
• ’,

  methods:{

  remove: function(index){

  //this.$emit()自定义事件分发

  this.$emit(‘remove’,index);

  }

  }

  });

  ---

  3-修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法！

  <todo-items slot=“todo-items” v-for=“(item,index) in todoItems”

  :item=“item” v-bind:index=“index” v-on:remove=“removeItems(index)”>

  ---

  对上一个代码进行修改，实现删除功能

  <todo-items slot=“todo-items” v-for=“(item,index) in todoItems”

  :item=“item” v-bind:index=“index” v-on:remove=“removeItems(index)”>

  效果：

  

  

  ---

  逻辑

  

  ---

  9.4Vue 入门小结

  核心：数据驱动，组件化

  优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Demo操作放到内存中执行；

  常用的属性：

  1. v-if

  2. v-else-if

  3. v-else

  4. v-for

  5. v-on绑定事件，简写@

  6. v-model数据双向绑定

  7. v-bind给巨剑绑定参数，简写：

  组件化：

  1. 组合组件slot插槽

  2. 组件内部绑定事件需要使用到this.$emit("事件名",参数);

  3. 计算属性的特色，缓存计算数据

  遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；

  ---

  说明

  Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~

  官网：

  https://element.eleme.cn/#/zh-CN

  https://ice.work/

  ---

  10、第一个Vue-cli程序

  ---

  10.1什么是vue-cli

  vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；

  预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；

  项目的功能

  1. 统一的目录结构

  2. 本地调试

  3. 热部署

  4. 单元测试

  5. 集成打包上线

  ---

  10.2需要的环境

  Node.js：

  http://nodejs.cn/download/

  安装就是无脑的下一步就好，安装在自己的环境目录下

  Git：

  https://git-scm.com/doenloads

  镜像：

  https://npm.taobao.org/mirrors/git-for-windows/

  确认nodejs安装成功：

  cmd下输入node -v，查看是否能够正确打印出版本号即可！

  cmd下输入npm -v，查看是否能够正确打印出版本号即可！

  这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！

  安装Node.js淘宝镜像加速器（cnpm）

  这样的话，下载会快很多~

  

  -g 就是全局安装

  npm install cnpm -g

  或使用如下语句解决npm速度慢的问题

  npm install --registry=https://registry.npm.taobao.org

  安装的过程可能有点慢~，耐心等待！虽然安装了cnpm，但是尽量少用！

  安装的位置：C:\Users\administrator\AppData\Roaming\npm

  

  安装vue-cli

  npm install vue-cli -g

  #测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack

  vue list

  

  ---

  10.3第一个vue-cli应用程序

  1.创建一个Vue项目，我们随便建立一个空的文件夹在电脑上，我这里在G盘下新建一个目录

  G:\狂\VueStudy

  2.创建一个基于webpack模板的vue应用程序

  #这里的myvue是顶日名称，可以根据自己的需求起名

  vue init webpack myvue

  

  

  一路都选择no即可；

  说明：

  1. Project name：项目名称，默认回车即可

  2. Project description：项目描述，默认回车即可

  3. Author：项目作者，默认回车即可

  4. Vue build (Use arrow keys)：选择第一个即可

  5. Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）

  6. Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)

  7. Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）

  8. Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）

  9. Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！

  初始化并运行

  cd myvue

  npm install

  

  安装完毕

  

  完整完成后多了很多依赖

  

  

  运行

  npm run dev

  

  访问

  http://localhost:8080/

  

  这就是 Node.js的服务，跟tomcat 差不多。

  Node.js它是一个服务，它可以运行一些东西。

  ---

  11、Webpack

  ---

  11.1什么是Webpack

  本质上， webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle.

  Webpack是当下最热门的前端资源模块化管理和打包工具， 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换， 任何形式的资源都可以当做模块， 比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等；

  伴随着移动互联网的大潮， 当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里， 使用HTML 5、CSS 3、ES 6等新的技术来开发丰富的功能， 网页已经不仅仅是完成浏览器的基本需求； WebApp通常是一个SPA(单页面应用) ， 每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。

  前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

  ---

  11.2模块化的演进

  Script标签

  这是最原始的JavaScript文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在window对象中，不同模块的调用都是一个作用域。

  这种原始的加载方式暴露了一些显而易见的弊端：

  1. 全局作用域下容易造成变量冲突

  2. 文件只能按照<script>的书写顺序进行加载

  3. 开发人员必须主观解决模块和代码库的依赖关系

  4. 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

  ---

  11.3CommonsJS

  服务器端的NodeJS遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来同步加载所需依赖的其它模块，然后通过exports或module.exports来导出需要暴露的接口。

  require(“module”);

  require(“…/module.js”);

  export.doStuff = function(){};

  module.exports = someValue;

  优点：

  • 服务器端模块便于重用

  • NPM中已经有超过45万个可以使用的模块包

  • 简单易用

  缺点：

  同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的不能非阻塞的并行加载多个模块

  实现：

  • 服务端的NodeJS

  • Browserify，浏览器端的CommonsJS实现，可以使用NPM的模块，但是编译打包后的文件体积较大

  • modules-webmake，类似Browserify，但不如Browserify灵活

  • wreq，Browserify的前身

  11.4AMD

  Asynchronous Module Definition规范其实主要一个主要接口define(id?,dependencies?,factory);它要在声明模块的时候指定所有的依赖dependencies，并且还要当做形参传到factory中，对于依赖的模块提前执行。

  define(“module”,[“dep1”,“dep2”],functian(d1,d2){

  return someExportedValue;

  });

  require（[“module”,“…/file.js”],function(module，file){});

  优点

  • 适合在浏览器环境中异步加载模块

  • 可以并行加载多个模块

  缺点

  • 提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不畅

  • 不符合通用的模块化思维方式，是一种妥协的实现

  实现

  • RequireJS

  • curl

  ---

  11.5CMD

  Commons Module Definition规范和AMD很相似，尽保持简单，并与CommonsJS和NodeJS的Modules规范保持了很大的兼容性。

  define(function(require,exports,module){

  var $=require(“jquery”);

  var Spinning = require(“./spinning”);

  exports.doSomething = …;

  module.exports=…;

  });

  优点：

  • 依赖就近，延迟执行

  • 可以很容易在NodeJS中运行

  缺点

  • 依赖SPM打包，模块的加载逻辑偏重

  实现

  • Sea.js

  • coolie

  ---

  11.6ES6模块

  EcmaScript 6标准增加了JavaScript语言层面的模块体系定义。ES 6模块的设计思想， 是尽量静态化， 使编译时就能确定模块的依赖关系， 以及输入和输出的变量。Commons JS和AMD模块，都只能在运行时确定这些东西。

  import “jquery”

  export function doStuff(){}

  module “localModule”{}

  优点

  • 容易进行静态分析

  • 面向未来的Ecma Script标准

  缺点

  • 原生浏览器端还没有实现该标准

  • 全新的命令，新版的Node JS才支持

  实现

  • Babel

  大家期望的模块

  系统可以兼容多种模块风格， 尽量可以利用已有的代码， 不仅仅只是JavaScript模块化， 还有CSS、图片、字体等资源也需要模块化。

  ---

  11.7安装Webpack

  WebPack是一款模块加载器兼打包工具， 它能把各种资源， 如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用。

  安装：

  npm install webpack -g

  npm install webpack-cli -g

  

  测试安装成功

  webpack -v

  webpack-cli -v

  

  ---

  配置

  创建 webpack.config.js配置文件

  • entry：入口文件， 指定Web Pack用哪个文件作为项目的入口

  • output：输出， 指定WebPack把处理完成的文件放置到指定路径

  • module：模块， 用于处理各种类型的文件

  • plugins：插件， 如：热更新、代码重用等

  • resolve：设置路径指向

  • watch：监听， 用于设置文件改动后直接打包

  module.exports = {

  entry:“”,

  output:{

  path:“”,

  filename:“”

  },

  module:{

  loaders:[

  {test:/.js$/,;\loade:“”}

  ]

  },

  plugins:{},

  resolve:{},

  watch:true

  }

  直接运行webpack命令打包

  11.8使用webpack

  1.创建项目

  2.创建一个名为modules的目录，用于放置JS模块等资源文件

  3.在modules下创建模块文件，如hello.js，用于编写JS模块相关代码

  //暴露一个方法：sayHi

  //暴露一个方法

  exports.sayHi = function(){

  document.write(‘

  ES6规范

  ’);

  }

  4.在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性

  require 导入一个模块，就可以调用这个模块中的方法了

  var hello = require(“./hello”);

  hello.sayHi();

  5.在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

  module.exports = {

  entry:“./modules/main.js”,

  output:{

  filename:“./js/bundle.js”

  }

  }

  6.在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件

  <!doctype html>

  7.在IDEA控制台中直接执行webpack；如果失败的话，就使用管理员权限运行即可！

  8.运行HTML看效果

  9.项目结构

  

  

  ---

  webpack就是一个打包工具，打包，从哪个地方选择一个入口，自动帮你把这个入口里面它所需要的所有东西全部通过它的方式打包起来，运行。

  12、Vue-router路由

  ---

  Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成， 让构建单页面应用变得易如反掌。包含的功能有：

  • 嵌套的路由/视图表

  • 模块化的、基于组件的路由配置

  • 路由参数、查询、通配符

  • 基于Vue js过渡系统的视图过渡效果

  • 细粒度的导航控制

  • 带有自动激活的CSS class的链接

  • HTML5 历史模式或hash模式， 在IE 9中自动降级

  • 自定义的滚动行为

  ---

  12.1安装

  基于第一个vue-cli进行测试学习； 先查看node modules中是否存在vue-router

  vue-router是一个插件包， 所以我们还是需要用n pm/cn pm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

  npm install vue-router --save-dev

  如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：

  import Vue from ‘vue’

  import VueRouter from ‘vue-router’

  Vue.use(VueRouter);

  ---

  12.测试

  1、先删除没有用的东西

  2、components 目录下存放我们自己编写的组件

  3、定义一个Content.vue 的组件

  内容页

  main.vue组件

  ---

  主页

  ---

  4、安装路由，在src目录下，新建一个文件夹：router，专门存放路由，配置路由index.js，如下

  import Vue from ‘vue’

  //导入路由插件

  import VueRouter from ‘vue-router’

  //导入自定义的组件

  import Content from ‘…/components/Content’

  import Main from ‘…/components/Main’

  //安装路由

  Vue.use(VueRouter);

  //配置导出路由

  export default new VueRouter({

  routes:[

  {

  //路由路径

  path: ‘/content’,

  //路由名字

  name: ‘content’,

  //跳转的组件

  component: Content

  },

  {

  //路由路径 @RequestMapping

  path: ‘/main’,

  //路由名字

  name: ‘main’,

  //跳转的组件

  component: Main

  }

  ]

  });

  ---

  5、在main.js中配置路由

  import Vue from ‘vue’

  import App from ‘./App’

  //导入

  import router from ‘./router’ //自动扫描里面的路由配置

  Vue.config.productionTip = false

  new Vue({

  el: ‘#app’,

  // 配置路由

  router,

  components: { App },

  template: ‘’

  })

  ---

  6、在App.vue中使用路由

  Vue-router

  首页

  内容页

  ---

  7、测试

  npm run dev

  

  ---

  

  ---

  

  ---

  13.Vue 实战快速上手

  ---

  13.1创建工程

  1、创建一个名为hello-vue的工程vue init webpack hello-vue

  2、安装依赖， 我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件

  #进入工程目录

  cd hello-vue

  #安装vue-router

  npm install vue-router --save-dev

  #安装element-ui

  npm i element-ui -S

  #安装依赖

  npm install

  安装SASS加载器

  cnpm install sass-loader node-sass --save-dev

  #启功测试

  npm run dev

  ---

  13.2npm命令解释：

  npm install moduleName：

  安装模块到项目目录下

  npm install -g moduleName：

  -g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置

  npm install -save moduleName：

  –save的意思是将模块安装到项目目录下， 并在package文件的dependencies节点写入依赖，-S为该命令的缩写

  npm install -save-dev moduleName:

  –save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

  ---

  13.3创建登录页面

  把没有用的初始化东西删掉！

  最后

  如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】