【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版本
之后我们使用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>
可！
本文地址：https://blog.csdn.net/Zangjiji/article/details/109249702
上一篇： 微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
下一篇： Vue.js 入门篇
推荐阅读
-
使用vue-router切换页面时，获取上一页url以及当前页面url的方法
-
使用vue-cli打包过程中的步骤以及问题的解决
-
脚手架vue-cli系列四：vue-cli工程webpack的基本用法
-
使用Webpack提高Vue.js应用的方式汇总(四种)
-
详解vue-router和vue-cli以及组件之间的传值
-
【Vue】四、Vue-cli、Webpack以及Vue-router的使用
-
详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
-
使用vue-cli打包过程中的步骤以及问题的解决
-
脚手架vue-cli系列四：vue-cli工程webpack的基本用法
-
详解vue-router和vue-cli以及组件之间的传值