Vue 项目快速入门
文章目录
- 说明
- 下载Node.js
-
- npm 配置
- 项目构建
-
- 安装vue-cli
- 创建应用
- 项目结构
-
- Vue 项目的特点（webpack)
- 使用 webpack
- Vue 路由
-
- 路由使用基本架构
- 路由嵌套
- 传递参数
-
- 方式一
- 方式二
- 重定向
- 路由模式&404处理
- 钩子函数
- 总结
说明
此部分为自行整理
下载Node.js
前面是直接使用 cdn加速器导入vue的，但是现在做开发所以不可能用 cdn 还是要自己下载。
下载直接进入官网下载：http://nodejs.cn/download/
下载安装后会自动配置环境。
版本验证
node -v
npm -v
npm 配置
这个就和 python 的pip是一个玩意。为什么要配置联想 pip 你就懂了。
npm install cnpm -g
配置 淘宝 的镜像，一般只有在实在下载不了第三方依赖的时候再用
cnpm install xxx
项目构建
安装vue-cli
#在命令台输入 -g 全局 不加当前项目使用
npm install vue-cli -g
#查看是否安装成功
vue list
创建应用
创建一个文件夹作为你的项目所在地，在终端进入所在地。
vue init webpack myvue
记住出了输入项目名字和作者名字以外，其他都选 no （其实你也可以一路yes 只是可以有些版本问题，有问题要自己改一下）
然后一路回车。
初始化并运行
cd myvue
npm install
如果有问题使用 cnpm i 也可以
npm run dev
此时在你的 8081 端口就能用了
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sqi8jtnz-1636534555724)(C:\Users\31395\AppData\Roaming\Typora\typora-user-images\image-20211109192550443.png)]](http://img.e-com-net.com/image/info8/0e6b555d4d7e4f7097031d4c6a69ca95.jpg)
在终端 按下 Crtl + c 终止
项目结构
首先我选择在 IDEA 里面做这个开发，这个没办法统一一下，我的SSM在这里做那个前端也在这里做一下，而且我的 Go也是这里搞的。（SSM 和 GO 的笔记实在不好整理而且有些东西不方便展示）
我们的目光主要放在 Scr 下的包
Vue 项目的特点（webpack)
这个其实还是我们webpack 的特点在这个构建出来的项目代码里面的特殊的地方。
这个其实主要是 export 和 import 在这里是啥玩意。
首先解释 export 是暴露的意思，其实就是相当于提供一个方法给另一个文件调用。
我们先创建一个Hello.js
//暴露一个方法
exports.sayHi = function () {
document.write("Test
>")
}
之后就是调用，你看这个就懂了：
那么说这个我们来说说这个 在项目里面的Componments
使用 webpack
前面是创建了一个 webpack 项目 那么现在我们需要这玩意来打包我们的页面。
WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用
下面我们要来使用，不过这里还要安装一下
npm install webpack -g
npm install webpack-cli -g
webpack -v
webpack-cli -v
在主目录创建webpack-config.js , webpack-config.js 这个相当于webpack的配置文件
enrty请求main.js的文件
output是输出的位置和名字
module.exports = {
entry: './modules/main.js',
output: {
filename: './js/bundle.js'
}
}
之后在终端执行
webpack 打包
或者
webpack --watch 监听变化
使用
创建一个 index.html (回到也可以随便你)
直接导入
例如：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="dist/js/bundle.js">script>
head>
<body>
body>
html>
Vue 路由
作为一个前后端分离项目，其实更像是一个在浏览器里面的独立应用，所以所有的页面跳转什么的都需要在用户本地去完成。
那么这里就需要使用到一个 vue-router
npm install vue-router --save-dev
这个其实结合 CS 架构其实就是不同页面的跳转，这个就是更像一个应用，我们服务端只负责数据传输，这个就有别于传统的 MVT / MVC 模式。
路由使用基本架构
想要使用路由的话还是要配置一下的。
在使用时，主要有一下三个文件需要被修改。
main.js router/index.js App.vue
(PS : 由于后面需要使用到路由，在项目创建的时候其实可以选择自动导入路由依赖，这样一来就不需要自己手动配置)
依次序：
之后是 index.js 这个是配置路由的地方
最后是 App.vue
注意每一个 模块需要被暴露出来，路由通过暴露出来的名字进行路由配置。
路由嵌套
这个其实就是套娃使用 children:
套娃
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
// 配置Hi对象
{
path: '/Hi',
name: 'Hi',
component: Hi,
//引子路由
children:[
{path:'/',component:Hi},
{path:'Hi1',component:Hi1},
{path:'Hi2',component:Hi2},
]
}
]
})
此时访问就是**/Hi/Hi1**
<router-link to="/Hi/Hi1">Hi1router-link>|
<router-link to="/Hi/Hi2">Hi2router-link>
传递参数
方式一
//index.js内
{
path:'/news/:id',
component:newsDetail,
}
//组件跳转
<router-link to="/news/123">跳转到详情页面</router-link>
此时在 被跳转页面 通过
$route.params.id
方式二
这个主要是传递参数不一样
<router-link :to="{name:'news',params:{id:666}}">跳转到详情页面router-link>
参数获取一样，当然也可以这样获取
先打开支持 props
{
path:'/news/:id',
component:newsDetail,
props: true
}
然后在接受的地方这样改
（Ps: 多参数也是一样的)
重定向
路由模式&404处理
hash 带 # 号：http://localhost/#/login
history 不带的： http://localhost/login
之后是那个404处理，那其实也很简单
{
path:'*',
component:NotFound,
}
这个 * 匹配没有找到的玩意
NotFound 是你对应的视图
钩子函数
这个东西其实类似于过滤器
当一个页面被跳转或者访问的时候，会调用两个方法，我们如果需要做
一些用户验证之类的就需要使用这个。
export default {
name: "UserProfile",
beforeRouteEnter: (to, from, next) => {
console.log("准备进入个人信息页");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开个人信息页");
next();
}
}
to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() 跳入下一个页面
next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
next(false) 返回原来的页面
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例
总结
关于 Vue 的状态 还有一个 vuex 进行管理。
我们需要使用这个玩意来管理当前的状态，例如 用户登录，我们在本地实现，只是前端登录的时候提交表单给后端，后端验证给个 token
然后 前端（也就是用户端）检测 token 是否存在 存在进入相应的页面。为了防止篡改 token 我们在用户操作页面让前端再次提交token 然后 后端返回 对应的 json 数据。感觉怪怪的还不好监控安全状态。
那么关于这个的具体使用在 关于 elementui 组装页面的 在说。
学到这个也就是抄个 elementui 做个页面 然后处理一些数据渲染和验证