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

最新推荐文章于 2021-11-04 14:23:14 发布

Zangjiji

最新推荐文章于 2021-11-04 14:23:14 发布

阅读量299

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Zangjiji/article/details/109249702

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

一、Vue-cli

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

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

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

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

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

之后我们安装一下 vue-clI

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

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

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

vue init webpack myvue

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

初始化并运行

npm install

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

启动！

npm run dev

访问下localhost:8080吧

OK!访问成功啦！

在控制台Ctrl+c可以停止

二、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

可以查看安装的情况。

安装好啦！

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。

我们在html调用一下这个

最后浏览器显示很可！

三、Vue-router路由

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

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

然后稍微清理一下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/>'
});

可以正常显示！

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

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

选择，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>

可！

Zangjiji

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue】四、Vue-cli、Webpack以及Vue-router的使用

【Vue】四、Vue-cli、Webpack以及Vue-router的使用一、Vue-cliNode.js : http://nodejs.cn/download/下载64位安装包，无脑下一步即可。安装完毕后通过npm -v以及node -v查看npm以及nodejs版本之后我们使用npm安装一下阿里巴巴的镜像# -g 就是全局安装npm install cnpm -g之后我们安装一下 vue-clI#在命令台输入cnpm install vue-cli -g#查看是否安装成功
复制链接

扫一扫

专栏目录