关键词：
文章目录
说明
此部分为自行整理
下载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 端口就能用了
在终端 按下 Crtl + c 终止
项目结构
首先我选择在 IDEA 里面做这个开发，这个没办法统一一下，我的SSM在这里做那个前端也在这里做一下，而且我的 Go也是这里搞的。（SSM 和 GO 的笔记实在不好整理而且有些东西不方便展示）
我们的目光主要放在 Scr 下的包
Vue 项目的特点（webpack)
这个其实还是我们webpack 的特点在这个构建出来的项目代码里面的特殊的地方。
这个其实主要是 export 和 import 在这里是啥玩意。
首先解释 export 是暴露的意思，其实就是相当于提供一个方法给另一个文件调用。
我们先创建一个Hello.js
//暴露一个方法
exports.sayHi = function ()
document.write("<h1>Test</h1>>")
之后就是调用，你看这个就懂了：
那么说这个我们来说说这个 在项目里面的Componments
<template>
<!--模板，也就是对应的 HTML 文件 结合了 vue 的-->
</template>
<script>
export default
//给外面暴露出来
name: 'HelloWorld',
data ()
return
msg: 'Welcome to Your Vue.js App'
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*css 布局 scoped 告诉它是当前使用当前模板的效果 */
</style>
使用 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>Title</title>
<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">Hi1</router-link>|
<router-link to="/Hi/Hi2">Hi2</router-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 做个页面 然后处理一些数据渲染和验证
即可快速入门（可直接开发前后端分离项目）(代码片段)
Vue快速入门一、Vue快速入门1、认识Vue2、安装Node.js（1）进入Node.js官网[https://nodejs.org/zh-cn/](https://nodejs.org/zh-cn/)2、NPM二、工程案例1、创建工程2、安装Vue（1）初始化项目（2）安装Vue3、创建HTML文件 查看详情
vue2+vuex+vue-router快速入门项目搭建(代码片段)
安装 我们可以通过两种方式把vue引入到我们的项目中，一种直接通过 <script> 引入,这时vue会被注册为一个全局变量。第二种便是通过 npm 进行安装，这种方式可以很好的配合 webpack 或 browserify&nbs... 查看详情
vue3实战教程（快速入门）(代码片段)
...ue3实战教程（快速入门）前言1.搭建脚手架1.1创建项目1.2清除多余文件，创建干净项目1.3创建登录页面2.创建404页面（引入sass）2.1引入sass2.2创建404页面3.构建登录注册页面（引入element-plus）3.1实现布局... 查看详情
vue的快速入门(代码片段)
... 3.安装完成后重启电脑 4.1打开idea创建一个staticweb项目hello-vue 2打开terminal控制台进入项目目录cdhello-vue 然后进行初始化命令npminit-y 3.安装Vue输入命令npminstallvue--save(过程需要联网下载) 成功... 查看详情
vue系列一：vue入门：搭建脚手架cli（新建自己的一个vue项目）(代码片段)
...个人理解：在实际开发中都是通过脚手架快速搭建一个vue项目，当然也可以使用CDN的方 查看详情
vue入门003~vue项目引入element并创建一个登录页面(代码片段)
上一节已经教大家如何创建一个vue项目，这一节，我们就温故下vue项目的创建，顺便引入element，实现一个简答的登陆页面。老规矩，先看效果图一，快速创建vue项目二，引入element类库首先我们进入element官网：https://element.eleme.cn... 查看详情
vue入门003~vue项目引入element并创建一个登录页面(代码片段)
上一节已经教大家如何创建一个vue项目，这一节，我们就温故下vue项目的创建，顺便引入element，实现一个简答的登陆页面。老规矩，先看效果图一，快速创建vue项目二，引入element类库首先我们进入element官网：https://element.eleme.cn... 查看详情
vue快速入门(代码片段)
...，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊... 查看详情
vuevue快速入门(代码片段)
Vue.js介绍 Vue.js的作者为EvanYou（尤雨溪），曾任职于GoogleCreativeLab。 Vue文档：https://cn.vuejs.org Vuegithub：https://github.com/vuejs/vue Vue是前端主流框架中的集大成者，它吸取了angular，react的经验，支持各种模式写法，... 查看详情
vue快速入门(代码片段)
文章目录说明Vue基本语法V-bind`v-if``v-else`v-for`v-on`事件绑定Vue双向绑定`v-model`组件组件定义组件嵌套组件给组件绑定事件Axios模拟json发送的数据发送请求Vue计算属性总结视图核心Vue核心说明本部分为Vue与Htm... 查看详情
快速入门vue(代码片段)
1.Vue基础1.1Vue简介1.JavaScript框架2.简化Dom操作3.响应式数据驱动1.2第一个Vue程序文档传送门：https://cn.vuejs.org1.导入开发版本的Vue.js2.创建Vue实例对象，设置el属性和data属性3.使用简洁的模板语法把数据渲染到页面上el挂载点&... 查看详情
快速入门vue(代码片段)
1.Vue基础1.1Vue简介1.JavaScript框架2.简化Dom操作3.响应式数据驱动1.2第一个Vue程序文档传送门：https://cn.vuejs.org1.导入开发版本的Vue.js2.创建Vue实例对象，设置el属性和data属性3.使用简洁的模板语法把数据渲染到页面上el挂载点&... 查看详情
vue.js快速入门番外篇——liveserver插件的简介安装与使用(代码片段)
...t，但是不能用于部署最终站点。也就是说我们可以在项目中实时用LiveServer作为一个实时服务器实时查看开发的网页或项目效果。安装第一步，打开VSCode开发工具，在VSCode扩展中搜索LiveServer，然后安 查看详情
vue--es6快速入门,vue初识(代码片段)
一、ES6快速入门let和const letES6新增了let命令，用于声明变量。其用法类似var，但是声明的变量只在let命令所在的代码块内有效。letx=10;vary=20;x//ReferenceError:xisnotdefinedy//20ViewCode效果如下：var声明变量存在变量提升。也就是在声... 查看详情
vue简单快速入门(代码片段)
...只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，与现代化的工具以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。2.SPA介绍Vue.js属于SPA一员。英文全称：SinglePageWebApplic... 查看详情
java网络商城项目springboot+springcloud+vue网络商城（ssm前后端分离项目）十六（商品排序，thymeleaf快速入门，商品详情页的展示）(代码片段)
Java网络商城项目SpringBoot+SpringCloud+Vue网络商城（SSM前后端分离项目）十六（商品详情页的展示）一、商品排序1、完善页面信息这是用来做排序的，默认按照综合排序。点击新品，应该按照商品创建时... 查看详情
java网络商城项目springboot+springcloud+vue网络商城（ssm前后端分离项目）十六（商品排序，thymeleaf快速入门，商品详情页的展示）(代码片段)
Java网络商城项目SpringBoot+SpringCloud+Vue网络商城（SSM前后端分离项目）十六（商品详情页的展示）一、商品排序1、完善页面信息这是用来做排序的，默认按照综合排序。点击新品，应该按照商品创建时... 查看详情
vue快速4小时入门5个小案例(代码片段)
第一个vue程序<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale 查看详情