【Vue】四、Vue-cli、Webpack以及Vue-router的使用

作者:神秘网友 发布时间:2020-10-24 03:14:52

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

一、Vue-cli

Node.js : http://nodejs.cn/download/

下载64位安装包，无脑下一步即可。

安装完毕后通过npm -v以及node -v查看npm以及nodejs版本

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

之后我们使用npm安装一下阿里巴巴的镜像

# -g 就是全局安装
npm install cnpm -g

之后我们安装一下 vue-clI

#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list

之后我们发现了很多这些乱七八糟的模板

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

之后我们要初始化一个vue cli项目

vue init webpack myvue

按照自己的需求进行配置，之后全部选择no

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

初始化并运行

npm install

发现有点警告，按照他的npm audit fix进行修复

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

启动！

npm run dev

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

访问下localhost:8080吧

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

OK!访问成功啦！

在控制台Ctrl+c可以停止

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

二、WebPack

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.
Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;
伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用HTML5、CSS3、ES6 等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求; WebApp通常是一个SPA (单页面应用) ，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。
前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

1、webpack安装

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

首先我们先安装下！

这里我们要安装webpack以及webpackcli两种工具

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

这里我们使用

webpack -v
webpack-cli -v

可以查看安装的情况。

? 【Vue】四、Vue-cli、Webpack以及Vue-router的使用

安装好啦！

2、webpack小demo

首先我们创建一个文件夹，然后用idea打开。

之后我们在项目中创建一个modules文件夹，记得不要打错哈！
之后我们在文件中创建一个hello.js，在其中打下如下代码。

exports.sayHi = function () {
    document.write("<p>你好</p>");
}

这里的exports相当于暴露了其中的function，把这个function叫做sayHi，可以把他当做一个java类。

之后我们创建一个main.js，输入以下代码

var jj = require("./hello.js");
jj.sayHi();

这里相当于 我把这个hello.js封装成了“对象”，我可以通过对象名.方法名调用相关的方法。

之后我们在项目的根目录创建一个web.config.js，这是我们webpack打包的配置文件，里面输入以下代码：

module.exports={
    entry : "./modules/main.js",    //入口
    output:{
        filename : "./js/bundle.js"   //打包结束输出的文件位置以及名称
    }
};

一切结束之后我们在控制台输入webpack

E:\code\webpack-study>webpack
[webpack-cli] Compilation finished
asset ./js/bundle.js 207 bytes [compared for emit] [minimized] (name: main)
./modules/main.js 44 bytes [built] [code generated]
./modules/hello.js 70 bytes [built] [code generated]
webpack 5.1.3 compiled successfully in 401 ms

打包成功！
我们看看输出文件夹里的东西，果真有一个bundle.js。

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

我们在html调用一下这个

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

最后浏览器显示很可！

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

三、Vue-router路由

打开我们之前的vuecli项目，先把点没用的删了。

先将Asset中的图片和之前我们在component中定义的组件删掉。

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

然后稍微清理一下index，App.vue和main.js

index:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myfirstvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

<template>
  <div id="app">
    <h1>您好jj！</h1>

  </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>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

可以正常显示！

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

OK，那我们开始一下vue路由的第一个demo

首先我们先在components文件夹下定义几个组件把！

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

选择，VueComponent

这里我们随便写几个，template里面写下你想显示的前端界面

<template>
    <h1>这是第一页哈</h1>
</template>

<script>
    export default {
        name: "First"
    }
</script>

<style scoped>

</style>

这里各位可以随便写几个，然后就不展示了哈哈哈。

然后创建一个router文件夹，里面创建一个index.js

这是路由的配置文件，里面需要定义一下我们具体跳转的逻辑。

这里具体代码如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// 记得把vuerouter导入进来
import VueRouter from 'vue-router'
// 把三个组件导进来

import First from '../components/FirstCom'
import Second from '../components/SecondCom'
import main from '../components/main'

Vue.config.productionTip = false

/* eslint-disable no-new */

//这里要用Vue.use来确定使用一个组件
Vue.use(VueRouter);

//可以理解为新建了一个VueRouter的实例
export default new VueRouter({
  routes : [
    {
      //用户输入的跳转链接
      path : '/index',
      //跳转到上面引入的First组件
      component : First
    },
    {
      path:'/second',
      component: Second
    },
    {
      path:'/main',
      component: main
    }
  ]

})

定义好之后，我们还需要在main.js中的vue对象引入我们定义的逻辑

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//引入router的配置文件，他会自动扫描文件夹下的所有文件找到相关配置
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //添加下
  router,
  components: { App },
  template: '<App/>'
});

最后我们要去App.js中的模板里引入我们定义好的东西哈

<template>
  <div id="app">
    <h1>vue-router</h1>
<!--    可以理解成A标签-->
     <router-link to="/main">首页</router-link>
    <router-link to="/index">第一页</router-link>

    <router-link to="/second">内容页</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>

可！

【Vue】四、Vue-cli、Webpack以及Vue-router的使用

【Vue】四、Vue-cli、Webpack以及Vue-router的使用相关教程

  1. 如何新建一个vue+vant移动端项目并完成移动端适配

    如何新建一个vue+vant移动端项目并完成移动端适配 默认已经安装好了node和vue cli。 vant官方文档:https://youzan.github.io/vant/#/zh-CN/home npm install -g @vue/cli 1.新建项目（安装速度慢，可使用taobao的仓库加速） #创建你的项目vue init webpack 你

  2. mybatis+spring+Druid连接池+Vue+ElementUI简单实现学生系统的增

    mybatis+spring+Druid连接池+Vue+ElementUI简单实现学生系统的增删改查 mybatis+spring+Druid连接池+Vue+ElementUI简单实现学生系统的增删改查 1.1 mapper目录 1.1.1.1 StudentMapper.xml ?xml version=1.0 encoding=UTF-8 ?!DOCTYPE mapper PUBLIC -//mybati

  3. vue项目依赖文件拆分

    vue项目依赖文件拆分 需求背景 ： 在构建vue单页面项目时，会将所有依赖打包成一个文件，如果依赖文件过大，会影响页面渲染。 为了好的用户体验我们需要对依赖文件进行拆分，那么如何拆分呢？ 解决方案 ： 修改webpack的配置文件externals，从输出的依赖文件

  4. Vuex数据管理详解

    Vuex数据管理详解 Vue路由守卫详解 Vuex是一个专为Vue.js应用开发的状态管理模式，集中式存储管理应用所有组件的状态。 Vuex遵循“单向数据流”理念，易于问题追踪以及提高代码可维护性。 Vue中多个视图依赖于同一状态时，视图间传参和状态同步比较困难，Vuex

  5. vue项目打包开启Gzip压缩

    vue项目打包开启Gzip压缩 vue 项目打包开启Gzip压缩 1. vue 步骤 安装 npm i compression-webpack-plugin -D 提供带 Content-Encoding 编码的压缩版的资源 webpack地址 使用—在 vue.config.js 文件中 const CompressionPlugin = require('compression-webpac

  6. 【Eelectron-vue】构建桌面应用（15）- 修改antdv输入框默认样式

    【Eelectron-vue】构建桌面应用（15）- 修改antdv输入框默认样式及表单校验提示信息 1.前言 现在的客户端与以往的有些区别，比如登录页面的输入框，大都废弃了之前的登录框样式，而采用只存在底边的输入框。还有就是输入框的错误信息都会采用浮层的形式提示，

  7. vue造轮子之封装选择下拉树

    vue造轮子之封装选择下拉树 最近公司有个新需求,希望能有一个下拉选择树的功能，大概的功能和样式如下所示: 然后我的第一反应就是上elementui上找现成的组件，但是挺遗憾的就是element并没有提供这样的组件，所以只能自己动手造一个了。 1. 组件需求 (1) 支持

  8. Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色

    Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色 先在Table 表格 上加 上属性 el-table :data=tableList border :cell-style=columnStyle el-table-column type=index label=第一列 width=50px/el-table-column el-table-column type=index label