目录
vue项目的使用
一.安装nodejs
node.js直接下载 nodejs.p2hp.com
安装完之后检测是否安装成功
node -v 检测是否安装node npm -v 检测是否安装npm
下载淘宝加速器
npm install cnpm -g -g就是全局安装
安装vue-cli
cnpm install vue-cli -g 测试是否安装成功 查看可以基于哪些模块创建cue应用 vue list
一定要用管理员打开
二.创建一个vue项目
在我们所要创建的路径中cmd进入
创建一个基于webpack模块的vue应用程序
这里myvue 这是项目的名称,可以根据自己的需求起名 vue init webpack myvue
说明
- Project name: 项目名称 默认回车即可
- Project descriptio: 项目描述, 默认回车即可
- Author: 项目作者,默认回车即可(可自行创建作者)
- Vue build 选择第一个即可
- install vue-router': 是否安装vue-router选择 n 不安装(懂的朋友可选择安装,不懂的朋友,后面我会说明)
- Use ESLint to Lint your code : 是否使用ESLint做代码检查,选择N 不安装(后期需要自己手动添加)
- Set up unit tests: 单元测试相关,选择n不安装(后期需要自己手动添加)
- Set e2e tests with Nightwatch: 单元测试相关,选择n不安装(后期需要自己手动添加)
- Should we run npm install for you after the project has been created : 创建完成后直接初始化 选择N 我们手动执行运行结果
初始化并运行
进入到我们的vue项目 cd myvue 下载安装依赖 注意: 一定要以管理员模式运行 npm install
在命令符中启动
npm run dev
成功启动后就是这样
将弹出来的8080复制到网址中就是这样我们的vue项目就完成了
三.安装webpack
npm install webpack -g npm install webpack-cli -g
测试安装成功
webpack -v webpack-cli -v
配置
创建webpack.config.js配置文件
entry: 入口文件,指定WebPack用那个文件作为项目的入口
output: 输出,指定WebPack把处理完成的文件防止到指定路径
module:模块,用于处理各种类型的文件
plugins:插件,如:热更新.代码重用
resolve:设置路径指向
watch: 监听,用于设置文件改动后直接打包
四.使用webpack
webpack是静态模块打包工具,分析翻译,压缩,打包代码
- 支持所有类型文件的打包
- 支持less/sass=>css
- 支持ES6/7/8=>ES5
- 压缩代码,提高加载速度
- 在主目录下创建一个名为modules的目录,用于防止JS模块等资源文件
- 在modiles下创建hello.js模块文件即可
//暴露一个方法:sayHi exports.sayHi = function(){ document.write("<div>Hello webpack</div>"); };
- 在modules下再创建一个名为main.js的入口文件,用于打包时设置entry属性
//require 导入一个模块,就可以调用这个模块中的方法了 var hello = require("./hello"); hello.sayHi();
- 在项目目录下创建webpack.config.js配置文件使用webpack命令打包
// 将模块导出 module.exports = { // 入口文件,指定WebPack用那个文件作为项目的入口 entry:'./modules/main.js', // 输出,指定WebPack把处理完成的文件防止到指定路径 output: { // 打包后指定js文件的路径和包名 filename:"./js/bundle.js" }};
注意: 使用webpack打包时,有可能会发生错误,这时请使用npx webpack打包
解决方法如下:
输入:get-ExecutionPolicy 获取执行策略
如果显示:Restricted, 表示是受限制的
输入:set-ExecutionPolicy Remotesigned, 设置执行策略远程签约
继续输入:get-ExecutionPolicy, 查询执行策略
显示:Remotesigned, 表示已经远程签约了,可以正常使用webpack命令打包了
打包成功后会出现一个文件夹
6.在目录上创建一个html ,导入我们打包后的js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--导入打包成功路径的js 前端的模块化开发-->
<script src="dist/js/bundle.js"> </script>
</body>
</html>
点击以下任意浏览器就可完成页面
这时我们的webpack项目就完成了
五.安装路由
把src下的assets还有我们的components的自定的组件删除
App.vue的文件修改,将一下出现的删除即可
<img src="./assets/logo.png"> <HelloWorld/> import HelloWorld from './components/HelloWorld' components: { HelloWorld }
vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装.打开命令行工具,进入你的项目目录,输入下面命令
npm install vue-router@3.5.2 --save-dev
安装好路由之后,可以在我们的node_modules中查找我们的所安装的文件
然后便在src中创建一个router路由目录,在该目录中创建一个index.js来使用路由
index.js的代码
//导入vue import Vue from 'vue' //导入router import VueRouter from 'vue-router' //安装router Vue.use(VueRouter);
然后使用npm run dev 启用项目
如果途中遇到报错就是我们的版本号出错,我们的vue项目中的vue-router版本过高
可以参考以下的版本号对应
在项目中中的package.json自己查看下载的各种组件的版本号
也可以通过npm list vue || npm list vue -g
命令查看
Vue CLI 4.5以下,对应的是Vue2
Vue CLI 4.5及以上,对应的是Vue3,也可以手动选择Vue2 vue
3.0以下兼容的是element-ui前端组件库;
vue 3.0兼容的是element-plus前端组件库.
vue2搭配vue-router3
vue3搭配vue-router4
六.路由的使用
1.new一个组件任意写一点东西 ,这里我们创建了Hello.vue和main.vue
- 在App.vue中导入我们的组件
//导入组件Hello import hello from './components/Hello' import main from './components/main'
- 创建一个router文件并创建一个任意名的js
// 导入Vue import Vue from 'vue //导入VueRouter import VueRouter from 'vue-router' //导入组件 import hello from '../components/Hello' import main from '../components/main' //安装路由 Vue.use(VueRouter); //配置导出路由 export default new VueRouter({ routes:[ { //路由路径 path:'/hello', name:'hello', //跳转的组件 component:hello }, { //路由路径 path:'/main', name:'main', //跳转的组件 component:main } ] } );
- 在main.js中导入我们的配置好的路由
// 只要文件中的js是以index开头的文件,我们就不需要写路径名,项目会自动扫描 import router from './router' new Vue({ el:'#app', //配置路由 router, components:{App}, template:'<App/>' })
- 在App.vue中配置跳转的路由路径
router-link 相当于我们的a标签 to是对应我们在路由中的path路径 <router-link to="/main">首页</router-link> <router-link to="/hello" >主页</router-link> <router-view></router-view>
路由的使用流程
七 安装elementUI
- 3.0以下兼容的是element-ui前端组件库;
- vue 3.0兼容的是element-plus前端组件库.
安装elementUI npm install elementUI@2.12.00
安装依赖 npm install
下载sass加载器 通过sass来编译 安装sass-loader 和 node-sass
npm install --save-dev node-sass
npm install --save-dev sass-loader
在我们的main.js中安装elementUI
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI)
接下来我们就可以直接在我们的组件中直接使用elemenUI
八.路由嵌套
嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成,
就是我们要在一个路由中,又加一个路由,称之为嵌套路由
- 我们先编写好组件代码
- 只需要在我们要嵌套的路由中添加如下
children:[ {path: '/user/List',component: userList}, {path: '/user/Profile', component:userProfile} ]
- 可在elementui中提取页面布局的代码,复制到我们的代码上,复制过来的代码我们需要变更一下代码,换成我们的跳转代码
九. 参数传递及重定向
方法一传递参数
参数传递三步骤
传递参数我们需要在router-link to属性中加一个对象
1.传递参数 params: 需要传递参数时我们就需要用上,绑定对象 router-link to= '{name: '/user/Profile' params:{id: 1}}' 2.接收参数 这时接收到path中,由path接收参数,由于我们传输的是id,我们只需要在path中绑定id即可 path : '/user/Profile/:id' 这时我们就能接收到前端传递过来的的参数 3.取参数 参数接收后我们需要将参数取出来,自己想在那个组件中取出来就在那个组件中写代码 {{$route.params.id}}
方法二传递参数
1.传递参数 params: 需要传递参数时我们就需要用上,绑定对象 name传递组件名 router-link :to= '{name: 'userProfile' params:{id: 1}}' 2.接收参数 这时接收到path中,由path接收参数,由于我们传输的是id,我们只需要在path中绑定id即可 children:[ { path: '/user/List/:id', name: 'userLis', component: userLis }, 这时我们就能接收到前端传递过来的的参数 3.取参数 参数接收后我们需要将参数取出来,自己想在那个组件中取出来就在那个组件中写代码 由组件传递传递 //我们直接取id就可以了 {{id}} export default { //这里的id由path中绑定 props:['id'], name: "Profile" }
重定向
重新定义一个path,在path中添加redirect属性,指定重定向到哪 { path: '/gohome', redirect: '/main' } 定义好后,在前端 router-link to='/gohome'中设置即可
十. 路由模式与404
路由模式
在网页中的地址我们能看到一直有一个#,对于有强迫症的人们来说这是非常难受的,那我们如何将#去掉而不影响我们打开页面地址呢,接下来就为你解答
路由模式有二种:
- hash:路径带#符号,如http://localhost/#/login
- history:路径不带#符号, 如http://localhost/login
而路由有两种模式,默认的是第一种模式
当我们改变他时,只需在路由中添加mode属性,在mode中指定模式
export default new VueRouter({{ mode:'history' })
404
当我们输入地址时不小心输错时,我们并不知道是地址的问题,这时的我们就会找不着头绪,以至于找大半天才找到问题的所在,这时我们就应该设置404页面,当我们的地址输错时,页面提醒
新建一个404的组件
//导入组件 import not from '../vies/404' export default new VueRouter({ routes:[ { path:'*', component:not } ] })
十一. 钩子函数
to: 路由将要跳转的路径信息
from: 路径跳转前的路径信息
next: 路由的控制参数
next() 跳入下一个页面
next('/path') 改变路由的跳转方向,使其调到另一个路由
next(false) 返回原来的页面
next((vm)+>{}) 仅在begoreRouteEnter中可用,vm是组件实例
1.安装Axios
npm install axios -s
- main.js 引用Axios
import axios from 'axios' Vue.prototype.axios=axios
- 在static的目录中添加一个mock的包,包中添加一个data.json
{ "name": "狂神说Java", "url" : "http://blog.kuangstudy.com", "page": 1, "isNonProfit": { "street": "含光门", "city": "陕西西安", "country": "中国" }, "links": [ { "name": "bilibili", "url": "https://space.bilibili.com/95256449" }, { "name": "哭丧硕士", "url": "https://blog.kuangsstudy.com" }, { "name": "百度", "url": "https://www.baidu.com/" } ] }
4.在我们的任意子路由中写钩子函数
//过滤器 beforeRouteEnter:(to,from,next)=>{ console.log("进入路由之前");//加载数据 next(vm => { vm.getData();//进入路由之前执行getData }); }, beforeRouteLeave:(to,from,next)=>{ console.log("进入路由之后") next(); }, methods:{ getData:function() { this.axios({ method: 'get', url:'http://localhost:8081/static/mock/data.json', }).then(function (response){ console.log(response) }) } }