IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向

在这里插入图片描述

wei_shuo的个人主页

wei_shuo的学习社区

Hello World !


Vue.js概述

Vue 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动

MVVM模型

IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第1张图片

  • Model:模型层,表示JavaScript对象
  • View:视图层,表示DOM(HTML操作的元素)
  • ViewModel:连接视图层和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者

MVVM模型的特点:

  • 低耦合:视图(View)可以独立Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变
  • 可复用:可以将视图逻辑放在ViewModel中,让更多View重用这段视图逻辑
  • 独立开发:开发人员可以专注于业务逻辑和数据开发(ViewModel),设计人员可以专注于页面设计
  • 可测试:测试可以针对ViewModel编写

Hello Vue

doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="../sources/vue.js">script>
head>
<body>


<div id="app">
    <h1>{{message}}h1>
div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定元素
        //Model:数据
        data:{
            message:"Hello,Vue!"
        }
    });
script>
body>
html>

缩写 v-bind & v-on

  • v-bind缩写

<a v-bind:href="url">...a>


<a :href="url">...a>


<a :[key]="url"> ... a>
  • v-on缩写

<a v-on:click="doSomething">...a>


<a @click="doSomething">...a>


<a @[event]="doSomething"> ... a>

总结:

它们看起来可能与普通的 HTML 略有不同,但 :@ 对于 attribute 名来说都是合法字符,在所有支持 Vue 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记中

Vue的7个属性

  • el属性

指示vue编译器从什么地方开始解析 vue的语法

  • data属性

组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中

  • methods属性

放置页面中的业务逻辑,js方法一般都放置在methods中

  • template属性

设置模板,会替换页面元素

  • computed属性

用来计算,根据已经存在的属性计算出新的属性,对于同样的数据,会缓存

  • render属性

创建真正的Virtual Dom

  • watch属性

监听data中数据的变化

双向数据绑定

双向数据绑定,是指视图 View 的变化能实时地让数据模型 Model 发生变化,而数据的变化也能实时更新到视图层

  • 输入框双向数据绑定

<div id="app">
    输入的文本:<input type="text" v-model="message">{{message}}
div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定元素
        //Model:数据
        data:{
            message:"同步更新"
        }
    });
script>
  • 单选框双向数据绑定

<div id="app">
    性别:
    <input type="radio" name="sex" value="" v-model="wei_shuo"><input type="radio" name="sex" value="" v-model="wei_shuo"><p>
        选中了谁:{{wei_shuo}}
    p>
div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定元素
        //Model:数据
        data:{
            wei_shuo:""
        }
    });
script>
  • 下拉框双向数据绑定

<div id="app">
        下拉框:
        <select v-model="selected">
            <option>---请选择---option>
            <option value="A">Aoption>
            <option value="B">Boption>
            <option value="C">Coption>
            <option value="D">Doption>
        select>
div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定元素
        //Model:数据
        data:{
            selected:"---请选择---"
        }
    });
script>

组件

IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第2张图片

组件可以扩展 HTML 元素,封装可重用的代码;组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树

格式:

Vue.component('my-component-name', { /* ... */ })

该组件名就是 Vue.component 的第一个参数

IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第3张图片


<div id="app">


    <wei_shuo v-for="item in items" v-bind:wei="item">wei_shuo>

div>

<script>

    <!--定义一个Vue组件component-->
    Vue.component("wei_shuo", {
        //接受参数
        props:['wei'],
        //模板
        template: '
  • {{wei}}
  • '
    }); var vm = new Vue({ el: "#app", //绑定元素 //Model:数据 data: { items: ["Java","Linux","前端","后端"] } });
    script>

    Axios异步通讯

    Axios是一个开源的可以用在浏览器和NodeJS的异步通讯框架,主要作用是实现AJAX异步通讯

    特点:

    • 浏览器创建XMLHttpRequests
    • 从node.js创建http请求
    • 支持Promise API(JS中链式编程)
    • 拦截请求和响应
    • 转换请求数据和响应数据
    • 取消请求
    • 自动转换JSON数据
    • 客户端支持防御XSRF(跨站请求伪造)

    背景

    Vue.js是一个视图层框架,作者(尤雨溪)严格准守SoC(关注度分离原则),所以Vue.js并不包含AJAX的通讯功能,为了解决通信问题,作者单独开发了名为vue-resource的插件,2.0版本以后停止了对该插件的维护并推荐了Axios框架

    Vue声明周期

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第4张图片

    Vue实例有完整的声明周期,开始创建、编译模板、挂载DOM、渲染->更新->渲染、卸载等一系列操作,也就是Vue实例从创建到销毁的过程,称为Vue的声明周期

    声明周期钩子函数

    • 创建前(beforeCreate)

    Vue实例开始初始化时调用

    • 创建后(created)

    实例创建之后进行调用,此时尚未开始DOM编译

    • 载入前(beforeMount)

    依然得不到具体的DOM元素,但vue挂载的根节点已经创建

    • 载入后(mounted)

    在DOM文档渲染完毕之后进行调用

    • 更新前(beforeUpdate)

    data更新时触发

    • 更新后(updated)

    data更新时触发

    • 销毁前(beforeDestroy)

    销毁实例前进行调用,此时实例任然有效

    • 销毁后(destroyed)

    实例被销毁之后进行调用

    • 创建data.json文件
    {
      "name": "wei_shuo",
      "url": "http://baidu.com",
      "page": "1",
      "isNonProfit": "true",
      "address": {
        "street": "陕西",
        "city": "西安",
        "country": "中国"
      },
      "links": [
        {
          "name": "B站",
          "url": "https://www.bilibili.com/"
        },
        {
          "name": "4399",
          "url": "https://www.4399.com/"
        },
        {
          "name": "百度",
          "url": "https://www.baidu.com/"
        }
      ]
    }
    
    • 引入vue.js和axios.js
    <script src="../sources/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    • Vue.html文件
    doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
        <script src="../sources/vue.js">script>
        <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    
        
        <style>
            [v-clock]{
                display: none;
            }
        style>
    head>
    <body>
    <div id="app" v-clock>
        <div>{{info.name}}div>
        <div>{{info.address.street}}div>
        <a v-bind:href="info.url">点击a>
    div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    //请求的返回参数,必须和json字符串一致
                    info:{
                        name:null,
                        address:{
                            street:null,
                            city:null,
                            contry:null
                        },
                        url:null
                    }
                }
            },
            mounted() {  //钩子函数  链式编程
                axios.get('../data.json').then(response => (this.info = response.data));
            }
        })
    script>
    body>
    html>
    /*
    浏览器显示结果:
    wei_shuo
    陕西
    点击
    */
    

    内容分发(Slot插槽)

    Vue.js中使用元素作为承载分发内容的出口,作者称为插槽,可以应用在组合组件的场景中

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第5张图片

    doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
        <script src="../sources/vue.js">script>
    head>
    <body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" v-bind:title="title1">todo-title>
            <todo-items slot="todo-items" v-for="item1 in todoItems" :item="item1">todo-items>
        todo>
    div>
    <script>
    
        <!--定义插槽-->
        Vue.component("todo", {
            template:
                '
    ' + '' + '
      ' + '' + '
    '
    + '
    '
    }); Vue.component("todo-title",{ props:['title'], template: '
    {{title}}
    '
    }); Vue.component("todo-items",{ props: ['item'], template: '
  • {{item}}
  • '
    }); var vm = new Vue({ el: "#app", data:{ title1:"wei_shou列表", todoItems:['学习Java','学习Linux','学习Vue'] } })
    script> body> html>

    自定义事件($emit)

    自定义事件分发

    格式: this.$emit('自定义事件名',参数)
    this.$emit('remove', index);
    
    doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
        <script src="../sources/vue.js">script>
    head>
    <body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" v-bind:title="title1">todo-title>
            <todo-items slot="todo-items" v-for="(item1,index) in todoItems" :item="item1" v-bind:index="index"
                        v-on:remove="removeItems(index)" v-bind:key="index">todo-items>
        todo>
    div>
    <script>
    
        <!--定义插槽-->
        Vue.component("todo", {
            template:
                '
    ' + '' + '
      ' + '' + '
    '
    + '
    '
    }); Vue.component("todo-title", { props: ['title'], template: '
    {{title}}
    '
    }); Vue.component("todo-items", { props: ['item', 'index'], //只能绑定当前组件的方法 template: '
  • {{index}}---{{item}}
  • '
    , methods: { remove: function (index) { //自定义事件分发 //this.$emit('自定义事件名',参数) this.$emit('remove', index) } } }); var vm = new Vue({ el: "#app", data: { title1: "wei_shou列表", todoItems: ['学习Java', '学习Linux', '学习Vue'], removeItems: function (index) { console.log("删除" + this.todoItems[index] + "OK") this.todoItems.splice(index, 1); //一次删除一个元素 } } })
    script> body> html>

    vue-cli项目

    vue-cli是官方提供的一个脚手架,用于快速生成一个vue的项目模板;预先定义的目录结构及基础代码,使开发更加快速

    功能:

    • 统一项目结构
    • 本地调试
    • 热部署
    • 单元测试
    • 集成打包上线
    • 创建Vue项目,新建目录
    • cmd目录窗进入创建的目录路径
    • 运行vue init webpack myvue命令初始化

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第6张图片

    等待5分钟左右,即可初始化完成

    项目名称

    ? Project name (myvue)

    项目描述

    ? Project description (A Vue.js project)

    作者

    ? Author

    构建(选择第一个即可:运行时编译)

    ? Vue build (Use arrow keys)

    vue路由,以下n即是手动创建,y即是自动创建

    ? Install vue-router? (Y/n)

    ? Use ESLint to lint your code?(Y/n)
    ? Set up unit tests (Y/n)
    ? Setup e2e tests with Nightwatch? (Y/n)

    No即不会自动npm install,yes就会自动npm install

    ? Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)

    Yes, use NPM
    Yes, use Yarn
    No, I will handle that myself

    D:\Java\Vue-cli>vue init webpack myvue
    ? Project name (myvue)		
    ? Project description (A Vue.js project)
    ? Author 
    ? Vue build (Use arrow keys)
    > Runtime + Compiler: recommended for most users
      Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
    nder functions are required elsewhere
    ? Install vue-router? No
    ? Use ESLint to lint your code? No
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
    > Yes, use NPM
      Yes, use Yarn
      No, I will handle that myself
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第7张图片

    • 目录路径即会产生myvue目录

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第8张图片

    初始化运行

    cd myvue

    npm install

    npm run dev

    • cmd窗口进入myvue路径

    • 执行npm install命令

    • 如果中途报错,安装命令窗口提示执行提示命令即可修复

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第9张图片

    • 执行npm run dev 启动当前项目

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第10张图片

    • cmd上面的cmd窗口别关闭,直接访问http://localhost:8080会出现如下页面

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第11张图片

    IDEA搭建vue-cli项目

    • 直接用IDEA——OPEN——myvue目录即可

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第12张图片

    Webpack学习

    webpack 是代码编译工具,有入口、出口、loader 和插件。webpack 是一个用于现代JavaScript应用程序的静态模块打包工具,当 webpack 处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle

    安装Webpack

    • npm install webpack -g
    • npm install webpack-cli -g

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第13张图片

    测试安装成功

    • webpack -v
    • webpack-cli -v

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第14张图片

    配置

    创建webpack.config.js配置文件

    • entry:入口文件,指定webpack用哪个文件作为项目入口
    • output:输出,指定webpack把处理完成的文件放置到指定路径
    • module:模板,用于处理各类类型的文件
    • plugins:插件,如:热更新、代码重用……
    • resolve:设置路径指向
    • watch:监听,用于设置文件改动后直接打包

    webpack使用

    • 创建项目
    • 创建名为modules的目录,用于放置JS模板等资源文件
    • modules下创建模板文件,用于编写JS模板相关代码(hello.js)
    //暴露一个方法
    exports.sayHi = function () {
        document.write("

    wei_shuo

    "
    ) }
    • modules下创建入口文件,用于打包时设置entry属性(main.js)
    var hello = require("./hello");
    hello.sayHi();
    
    • 项目目录下创建配置文件(webpack.config.js)
    module.exports = {
        entry: './modules/main.js',
        output: {
            filename: "./js/bundle.js"
        }
    };
    
    • 在IDEA终端使用webpack命令打包(bundle.js)
    (()=>{var r={645:(r,t)=>{t.sayHi=function(){document.write("

    wei_shuo

    >"
    )}}},t={};(function e(o){var i=t[o];if(void 0!==i)return i.exports;var n=t[o]={exports:{}};return r[o](n,n.exports,e),n.exports})(645).sayHi()})();
    • 项目目录下创建HTML页面,导入webpack打包后的JS文件(index.html)
    doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
    head>
    <body>
    
    
    <script src="dist/js/bundle.js">
    
    script>
    body>
    html>
    
    • 说明

      参数 --watch 用于监听变化

      webpack --watch

    vue-router路由

    Vue Router 是 Vue.js的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举

    功能:vue-router官方

    • 嵌套路由映射
    • 动态路由选择
    • 模块化、基于组件的路由配置
    • 路由参数、查询、通配符
    • 展示由 Vue.js 的过渡系统提供的过渡效果
    • 细致的导航控制
    • 自动激活 CSS 类的链接
    • HTML5 history 模式或 hash 模式
    • 可定制的滚动行为
    • URL 的正确编码

    安装vue-router

    • 基于第一个vue-cli进行测试学习;查看node_modules中是否存在vue-router
    • vue-router是一个插件包,所以需要用npm&cnpm进行安装
    • 打开IDEA终端,输入命令,安装vue-router
    npm install vue-router --save-dev
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第15张图片

    • 因为依赖关系报错则,使用如下安装命令
    npm install --legacy-peer-deps vue-router --save-dev
    

    在这里插入图片描述

    • 如果报错信息显示run npm audit fixto fix them,or npm audit for details;根据信息执行提示命令即可
    npm audit fix
    npm audit
    
    • 在项目main.js中导入,并使用
    //导入安装的vue-router组件
    import VueRouter from 'vue-router'
    
    //显示声明使用VueRouter
    Vue.use(VueRouter);
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第16张图片

    测试

    • IDEA终端运行项目
    npm run dev
    
    • 如果出现报错
    "export 'default' (imported as 'VueRouter') was not found in 'vue-router'
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第17张图片

    两种原因:

    • 路由格式编写错误

    路由格式

    routes: [{
    	// 路径
    	path: '/home',
    	// 组件名
    	component: Home
    }];
    
    • 对应版本不兼容

    安装的时候默认安装最新版本可能与其他插件不兼容,推荐使用稳定版本[email protected]

       卸载:npm uninstall vue-router
       下载&降级:npm install vue-router@3.5.2 --save-dev	//   @xxx 自己指定版本
    

    在这里插入图片描述

    • 再次运行项目(npm run dev)

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第18张图片

    • main.js 代码
    import Vue from 'vue'
    import App from './App'
    
    //导入安装的vue-router组件
    import VueRouter from 'vue-router'
    
    //显示声明使用VueRouter
    Vue.use(VueRouter);
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      components: { App },
      template: ''
    })
    
    • App.vue代码
    
    
    
    
    
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第19张图片

    vue-router使用

    创建公共组件目录components

    目录components下创建vue组件

    • Content.vue
    
    
    
    
    
    
    
    
    
    • Main.vue
    
    
    
    
    
    

    创建存放路由的文件夹router

    目录router创建router路由

    • index.js
    //导入vue和vue-router组件
    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
        },
        {
          //路由路径
          path:'/main',
          name:'content',
          //跳转组件
          component:Main
        }
    
      ]
    });
    

    配置路由

    在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: ''
    })
    

    使用路由

    在App.vue中使用路由

    
    
    
    
    
    

    vue-router使用流程

    • components目录下创建vue组件(wei.vue)
    
    
    
    
    
    
    • 目录router创建router路由(index.js)
    //导入vue和vue-router组件
    import Vue from "vue";
    import VueRouter from "vue-router";
    
    //导入components目录中vue组件
    import wei from "../components/wei"
    
    //安装路由
    Vue.use(VueRouter);
    
    //配置导出路由
    export default new VueRouter({
      routes:[
        {
          //路由路径
          path:'/wei',
          //name 可省略
          name:'content',
          //跳转组件
          component:wei
        }
      ]
    });
    
    • 在main.js中配置路由
    <template>
      <div id="app">
        <h1>欢迎wei_shuo</h1>
    
        <!--跳转连接-->
        <router-link to="/wei">wei</router-link>
    
        <!--展示视图-->
        <router-view></router-view>
    
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
    • 在App.vue中使用、导入配置路由
    import Vue from 'vue'
    import App from './App'
    
    //导入配置路由文件
    import router from './router'   //自动扫描里面的路由配置
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      //配置路由
      router,
      components: { App },
      template: ''
    })
    

    结果测试

    • 网页点击首页

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第20张图片

    • 点击内容页面

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第21张图片

    • 点击wei

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第22张图片

    Axios

    Axios 是一个基于 promise异步编程的一种解决方案)网络请求库,作用于node.js和浏览器中, 它是 isomorphic(即同一套代码可以运行在浏览器和node.js中);服务端它使用原生 node.js http 模块,,而在客户端 (浏览端)则使用 XMLHttpRequests

    异步编程:异步编程是让程序并发运行的一种手段

    功能:Axios中文网

    • 从浏览器创建 XMLHttpRequests
    • 从 node.js 创建http请求
    • 支持Promise API
    • 拦截请求和响应
    • 转换请求和响应数据
    • 取消请求
    • 自动转换JSON数据
    • 客户端支持防御XSRF

    安装

    $ npm install axios
    

    Vue+ElementUI

    Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

    Element官网

    创建工程

    • 创建hello-vue工程
    vue init webpack hello-vue
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第23张图片

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第24张图片

    • 安装依赖,需要安装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
    
    • 安装 vue-router过程中如果报错依赖错误,则绕过依赖安装
    npm install vue-router --save-dev --legacy-peer-deps
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第25张图片

    • 安装element-ui报错依赖过程中如果报错依赖错误,则绕过依赖安装
    npm i element-ui -S --save-dev --legacy-peer-deps
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第26张图片

    • 安装依赖过程中如果报错依赖错误,则绕过依赖安装
    npm install --save-dev --legacy-peer-deps
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第27张图片

    • 安装 SASS 加载器WARNING是警告,可以忽略
    cnpm install sass-loader node-sass --save-dev
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第28张图片

    • 启动测试
    npm run dev
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第29张图片

    • 使用IDEA打开hello-vue项目

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第30张图片

    项目搭建

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第31张图片

    • 创建页面目录(views)和前端路由目录(routers)

    • 页面目录(views)下创建

    • Main.vue(首页)

    
    
    
    
    
    
    • Login.vue(登录页面)
    
    
    
    
    
    
    • 前端路由目录(routers)下创建index.js
    //导入vue和vue-router组件
    import Vue from "vue";
    import Router from 'vue-router'
    
    //添加路由组件
    import Main from "../views/Main";
    import Login from "../views/Login";
    
    //使用vue-router组件
    Vue.use(Router)
    
    //导出默认接口路由
    export default new Router({
      routes:[
        {
          //路由路径
          path:'/main',
          //跳转组件
          component:Main
        },
        {
          //路由路径
          path:'/login',
          //跳转组件
          component:Login
        }
      ]
    });
    
    • main.js(入口js文件)
    import Vue from 'vue'
    import App from './App'
    
    //导入配置路由文件,自动扫描里面的路由配置
    import router from './routers'
    
    //导入ElementUI
    import Element from 'element-ui'
    //导入ElementUI的CSS
    import 'element-ui/lib/theme-chalk/index.css';
    
    //安装路由
    Vue.use(router);
    //安装ElementUI
    Vue.use(Element)
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      //路由
      router,
      //ElementUI
      render: h => h(App)
    })
    
    • App.vue(根组件)
    
    
    
    
    • IDEA终端运行
    npm run dev
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第32张图片

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第33张图片

    排错分析

    排错一

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第34张图片

    • 运行项目报错,this.getOptions is not a function,说明sass-loader版本太高
    npm run dev
    
    • package.json文件中降低sass-loader版本

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第35张图片

    • 更改完sass-loader版本,然后在终端使用npm install命令
    • 如果报错依赖无法解析如下

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第36张图片

    • 则执行命令,如下所示则成功
    npm install --legacy-peer-deps
    

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第37张图片

    排错二

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第38张图片

    Module build failed: Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.
    
    • 错误来自sass-loader,因为node-sass @latest为v8.0.0,而sass-loader期望值为^ 4.0.0
    • 卸载5.0 重装系统提示需求版本即可(4.0.0)的就可以了
    // 卸载node-sass
    npm uninstall node-sass --legacy-peer-deps
    
    // 然后安装需求版本
    cnpm install [email protected] --legacy-peer-deps
    

    排错三

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第39张图片

    Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)
    

    查看本机安装的node版本安装对应的node-sass版本

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第40张图片

    • 部分对应版本
    node版本:v14.18.3
    node-sass版本:4.7.2
    sass-loader版本:7.3.1
    
    node版本:16.13.1
    node-sass版本:6.0.1
    sass-loader版本:10.0.1
    
    • 查看自己的node版本,我的是node16,所以应安装node-sass 6.0+版本
    D:\Java\Vue-cli\hello-vue>node -v
    v16.18.0
    
    • 安装node-sass 6.0+版本(6.0.1)

    • package.json调整版本

    "sass-loader": "^6.0.1"
    
    • 终端执行命令更新依赖项
    npm install --legacy-peer-deps
    
    • 安装对应版本的node-sass
    cnpm install [email protected] --legacy-peer-deps
    

    排错四

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第41张图片

    "export 'default' (imported as 'Router') was not found in 'vue-router'
    
    • 原因一:路由格式编写错误
    routes: [{
    	// 路径
    	path: '/home',
    	// 组件名
    	component: Home
    }];
    
    • 原因二:下载或者卸载已有版本
       卸载:npm uninstall vue-router
       下载&降级:npm install [email protected] --save-dev	//   @xxx 自己指定版本
    

    降级之后,需要使用命令更新依赖

    npm install --legacy-peer-deps
    

    排错总结

    • 版本问题,更改package.json版本后,需要执行更新依赖的命令
    npm install --legacy-peer-deps
    
    • 系统提示执行命令,可以直接执行即可
    • 错误多半是版本兼容错误,调整对应版本即可,如果是依赖错误的话,需要在命令后加上
    --legacy-peer-deps
    

    运行项目

    • 运行项目
    npm run dev
    

    vue项目目录分析

    build:构建脚本目录

    config:项目配置

    node_modules:npm加载项目的依赖模块

    src:源码目录

    • main.js——入口js文件
    • App.vue——根组件
    • components——共组件目录
    • assets——资源目录,这里的资源会被wabpack构建
    • routes——前端路由
    • store——应用级数据(state)
    • views——页面目录

    static:静态资源目录,不会被webpack构建

    package.json:npm包配置文件,定义项目的npm脚本、依赖包等信息

    README.md:项目的说明文档,markdown格式

    npm命令解析

    • 安装模块到项目下
    npm install moduleName
    
    • -g:模块安装到全局
    npm install -g moduleName
    
    • –save:模块安装到项目下,并在package文件的devDependencies结点写入依赖,-S 为缩写
    npm install --save moduleName
    
    • –save-dev:将模块安装到项目目录下,并且在package文件devDependencies结点写入依赖,-D为缩写
    npm install --save-dev moduleName
    

    路由嵌套

    嵌套路由(子路由),实际应用中,通常由多层嵌套的组件组合而成,同样的URL中各段动态路径也按某种结构对应嵌套的各层组件

    /user/johnny/profile                     /user/johnny/posts
    +------------------+                  +-----------------+
    | User             |                  | User            |
    | +--------------+ |                  | +-------------+ |
    | | Profile      | |  +------------>  | | Posts       | |
    | |              | |                  | |             | |
    | +--------------+ |                  | +-------------+ |
    +------------------+                  +-----------------+
    

    项目结构

    • 创建页面目录(views)和前端路由目录(routers)

    • 页面目录(views)下创建,user目录

    • main.vue(首页)

    
    
    
    
    • ProFile.vue(个人信息)
    
    
    
    
    
    
    
    • List.vue(用户列表)
    
    
    
    
    
    
    • 前端路由目录(routers)下创建index.js
    //导入vue和vue-router组件
    import Vue from "vue";
    import Router from 'vue-router'
    
    //添加路由组件
    import Main from "../views/Main"
    import Login from "../views/Login"
    
    import UserList from '../views/user/List'
    import UserProFile from '../views/user/ProFile'
    
    //使用vue-router组件
    Vue.use(Router)
    
    //导出默认接口路由
    export default new Router({
      routes: [
        {
          //路由路径
          path: '/main',
          //跳转组件
          component: Main,
          //嵌套路由
          children: [
            {path: '/user/profile', component: UserProFile},
            {path: '/user/list', component: UserList}
          ]
        },
        {
          //路由路径
          path: '/login',
          //跳转组件
          component: Login
        }
      ]
    });
    
    • main.js(入口js文件)
    import Vue from 'vue'
    import App from './App'
    
    //导入配置路由文件,自动扫描里面的路由配置
    import router from './routers'
    
    //导入ElementUI
    import Element from 'element-ui'
    //导入ElementUI的CSS
    import 'element-ui/lib/theme-chalk/index.css';
    
    //安装路由
    Vue.use(router);
    //安装ElementUI
    Vue.use(Element)
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      //路由
      router,
      //ElementUI
      render: h => h(App)
    })
    
    • App.vue(根组件)
    
    
    
    
    • IDEA终端运行

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向_第42张图片

    路由模式

    • hash:带路径#符号,如:http://localhost/#/login
    • history:路径不带#符号,如:http://localhost/login
    export default new Router({
      mode:'history',
      routes: [
      ]
    });
    

    参数传递&重定向

    参数传递

    • Main.vue
    
    个人信息
    
    • ProFile.vue
    <template>
      <div>
        <h1>个人信息h1>
        
        {{id}}
      div>
    template>
    
    <script>
    export default {
     //方式二: 
      props:['id'],
      name: "UserProFile"
    }
    script>
    
    <style scoped>
    
    style>
    

    重定向

    //导出默认接口路由
    export default new Router({
      mode:'history',
      routes: [
        //重定向
        {
          path:'/goHome',
          redirect:'/main'	//重定向路径
        }
      ]
    });
    

    404页面

    • views页面目录,创建404页面
    • NotFound.vue
    
    
    
    
    
    
    • index.js配置
    import NotFound from "../views/NotFound"
    
    
    //导出默认接口路由
    export default new Router({
      mode:'history',
      routes: [
        {
          path:'/*',
          component:NotFound
        }
      ]
    });
    

    路由钩子&异步请求

    路由钩子

    beforeRouteEnter:在进入路由前执行

    beforeRouteLeave:在离开路由前执行

    • to:路由将要跳转的路径信息
    • from:路径跳转前的路径信息
    • next:路由的控制参数
      • next() 跳入下一个页面
      • next(‘/path’) 改变路由的跳转方向,使其跳到另一个路由
      • next(false) 返回原来页面
      • next((vm)=>{}) 仅在beforeRouteEnter中使用,vm是组件实例
    <script>
    export default {
      //进入路由之前执行
      beforeRouteEnter:(to,from,next)=>{
        console.log("STARE");
        next();
      },
      //进入路由之后执行
      beforeRouteLeave:(to,from,next)=>{
        console.log("END");
        next();
      }
    }
    </script>
    

    异步请求

    • 安装Axios和vue-axios
    cnpm install axios -s
    cnpm install --save vue-axios
    
    • 安装Axios
    • main.js中导入Axios组件
    //导入Axios
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    //安装axios和VueAxios
    Vue.use(VueAxios, axios)
    

    Vue工程化项目目录结构

    • node_modules 通过npm install命令安装的软件包存放的目录(非全局安装)

    • dist 项目打包发布目录

    • public 最后打包时,该目录中的文件会直接复制到dist目录中

      • public/index.html 首页入口文件
      • public/favicon.ico 图标文件
    • src

      • src/assets 静态资源文件目录

      • src/components 组件文件目录

      • src/router 路由插件目录

        • src/router/index.js 路由插件配置文件
      • src/store 状态管理插件目录

        • src/store/index.js 状态管理插件配置文件
      • src/plugins 插件目录,一般存放axios.js插件文件

      • src/views 组件文件目录(仅仅具有模板和样式,没有js程序)

      • src/App.vue 应用组件

      • src/main.js 程序逻辑入口文件

    • package.json 包管理配置文件,记录项目需要的各种软件包信息

    • package-lock.json 包版本锁定配置文件

    • vue.config.js vue项目配置文件


    结语:创作不易,如果觉得博主的文章赏心悦目,还请——点赞收藏⭐️评论冲冲冲


    你可能感兴趣的:(Vue,vue.js,webpack,intellij-idea,node.js)