3.VUE进阶笔记梳理-前端工程化Vue-cli
Vue是渐近式框架,你可以用它一个功能,也可以用全家桶。前面的章节中,我们是在html中引入vue.js,只用它核心的数据绑定功能。但基于vue的扩展还有很多,比如vueRouter,axios,elementUI等。
vue-cli,它是一个专门为单页面应用快速搭建繁杂的Vue脚手架,通俗点说就是代码生成器,可以快速生成一套基于Vue完整的前端框架,单独编译,单独部署。可以再集成各种第三方插件,扩展出更多的功能。
也就是:Vue cli = Vue + 一堆的js插件
Vue CLI 4.5以下,对应的是Vue2
Vue CLI 4.5及以上,对应的是Vue3,创建项目的时候可以选择Vue2
利用vue-cli脚手架来构建Vue项目需要先安装Node.js和NPM环境。(安装了node.js才有npm ,才能安装vue-cli)
1.环境安装
1.1安装Node.js
可以在官网下载(https://nodejs.org/en/download/)
注意:最新版本不支持win7系统,win7系统需要下载之前的版本,比如14之前的,下载地址:https://nodejs.org/dist/
安装步骤很简单,一直点击下一步就可以,中间有一个安装目录,需要修改的可以改一下。
配置一下Node.js环境变量:
1.2 安装npm
由于Node.js已经集成了npm,所以安装完Node.js,npm也一并安装好了。
在cmd终端输入命令npm -v ,出现版本号代表成功
查看node全局变量:npm list -g --depth 0
查看全局安装路径:npm config ls
1.3 安装cnpm
由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm。
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待
【注意已管理员的身份运行cmd,要不然会报错】
查看是否安装成功,出现版本信息代表成功
安装成功以后,之后 npm install 命令都可以更改为 cnpm install
1.4 安装脚手架Vue Cli
关于版本:
Vue CLI 3.0后的包名称由 vue-cli 改成了 @vue/cli。 所以3.0前后的版本安装方式不同。
3.0之前的版本安装方式:
输入命令 npm install -g vue-cli
或者 cnpm install -g vue-cli
-g :代表全局安装
3.0之后的版本安装方式:
输入命令 npm install -g @vue/cli
或者 cnpm install -g @vue/cli
另外要注意:
默认npm全局安装的文件将会保存到 C:\Users\计算机名\AppData\Roaming\npm下,所以,安装好node后,可以重新设置一下node_global和node_cache的目录,win10中可以不设置,系统自己会配置环境变量,但win7中不会自动配置环境变量,为了方便找到你安装的文件,最好设置一下。
设置方式:
在node安装目录下创建node_global和node_cache文件夹:
然后cmd中输入命令:
npm config set prefix "E:\2_SVN_Work\NodesWork\node_global"
npm config set cache "E:\2_SVN_Work\NodesWork\node_cache"
并配置一下环境变量
安装3.0之前的版本:
安装3.0之后的额版本:
将之前安装过的旧版本卸载掉:npm uninstall vue-cli -g
安装最新的版本
解决vue装脚手架时候,npm ERR! code EEXIST报错!!
所以在命令后面加上--force就行了
npm install -g @vue/cli --force
2.创建第一个脚手架项目。
2.1创建项目
vue-cli 3.0 以后项目创建命令:
vue create vue项目名
下一步,选择配置方式
下一步,选择插件安装 通过↑ ↓ 箭头选择你要配置的项,按 空格 是选中,按 a 是全选,按 i 是反选。根据需要选择
下一步,选择vue.js版本
下一步,选择Vue-Router实现方式
下一步,选择css的预处理器
下一步,一个插件化的javascript代码检测工具
下一步,选择代码检测规则
下一步,选择如何存放配置
下一步,是否保存当前配置
下一步,按回车后开始构建项目,可以看到成功信息
2.2启动服务
启动服务有两种方式。
方式1: 命令的方式
进入项目所在文件夹,输入命令 npm run serve
测试:
浏览器输入:
方式2:
访问页面:
2.3 项目结构目录
在自己的开发软件里打开创建出来的项目,我这里用vscode打开,打开方式是, 文件-->打开文件夹-->选择之前创建的vue项目文件夹。
打开的项目结构如下:
2.4 main.js、App.vue、index.html关系
index.html---主页,项目入口
App.vue---根组件
main.js---入口文件
App.vue是个组件,通过export default 导出组件的名称为App
然后在main.js中,通过import App from './App'导入该组件
运行入口文件main.js以后会新建一个Vue实例,在Vue实例中,通过mount(“#app”)告诉该实例要挂载的地方,即实例装载到index.html中的位置。而Vue实例中的内容就在App.vue中,也就是App.vue中的template里的内容会装载到index.html里的id="app"的div里面。
2.5关闭服务
在运行窗口下,按“Ctrl+C”,输入“y”,即可终止服务。
七.Vue-router
1、什么是vue-router
vue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
传统页面切换是用超链接a标签进行切换。但vue里是用路由,因为我们用Vue做的都是单页应用,就相当于只有一个主的index.html页面,所以你写的<a></a>
标签是不起作用的,你必须使用vue-router
来进行管理。
2、 安装vue-router
vue-router是一个插件包,所以我们还是需要用npm来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。
npm install vue-router --save-dev
如果你安装很慢,也可以用cnpm进行安装,如果你在使用vue-cli中已经选择安装了vue-router,那这里不需要重复安装了。
4、vue-router的使用
4.1 给组件或页面定义路由
4.2 路由跳转的方式
方式1:
<router-link to="{path:'/editUser',query:{id:user.id}}"></router-link>
接收参数:
接收的页面中的vue对象中: this.$route.query.id
方式2:
this.$router.push({path:'/users'})
完整案例:
创建News.vue组件
<template> <div> 这是新闻列表页 <li v-for="news in newsList" :key="news.id"> <router-link :to="{path:'/newsInfo',query:{id:news.id}}"> {{news.title}}</router-link> </li> </div> </template> <script> export default { name: "News", data:function(){ return { newsList:[ { id:"1", title:"新闻1", content:"新闻1的内容" }, { id:"2", title:"新闻2", content:"新闻2的内容" } ] } } } </script>
创建NewsInfo.vue组件
<template> <div> {{news.content}} </div> </template> <script> export default{ name:"NewsInfo", data(){ return { news:{ id:"", title:"", content:"" } } }, mounted(){ //获取传过来的参数id this.news.id= this.$route.query.id var newsList=[ { id:"1", title:"新闻1", content:"新闻1的内容" }, { id:"2", title:"新闻2", content:"新闻2的内容" } ] var index = newsList.findIndex( item => { if(this.news.id == item.id){ return true; } }); this.news=newsList[index] } } </script>
设置路由:
import { createRouter, createWebHashHistory } from "vue-router"; //import Home from "../views/Home.vue"; const routes = [ { path:"/", name:"News", component:()=>import("../views/News.vue") }, { path:"/newsInfo", name:"NewsInfo", component:()=>import("../views/NewsInfo.vue") } ]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router;
设置App.vue主组件
<template> <div> <!-- <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> --> <!-- 展示当前路径对应的组件内容 --> <router-view /> </div> </template> <style lang="scss"> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } } } </style>
4.3 a和router-link的区别
a标签
点击a标签从当前页面跳转到另一个页面
通过a标签跳转,页面就会重新加载,相当于重新打开了一个网页
router-link
通过router-link进行跳转不会跳转到新的页面,不会重新渲染,它会选择路由所指的组件进行渲染
总结
通过a标签和router-link对比,router-link避免了重复渲染,不像a标签一样需要重新渲染减少了DOM性能的损耗