快速上手 | Vue.js (vuejs.org)
nodejs.org/
vue项目实质上是index.html页面和多个js文件的集合，最终解析后的html和js代码可以由浏览器解析运行：
vue项目的创建，需要脚手架工具来搭建；
在编译的源码阶段，文件格式为.vue .json 的，这都是浏览器解析不了的；
并且vue项目需要各种各样的依赖文件，如果手动下载也非常麻烦。
所以需要了解各种各样的辅助工具来完成构建使用vue项目。
目录
一、vue项目的创建：
开发软件下载：
依赖下载配置代理路径：
创建方式一：
0）参照官网快速创建的流程
1）从文件资源管理器找个文件夹输入cmd进入： 编辑
2）执行命令
创建的其他方式：
二、vue项目的使用
0）vue项目的构成：
1）vue项目的运行：
1.0）一个.vue类型的文件分为三部分
1.1）启动服务
1.2）访问主界面：
2）vue的组件使用：
2.1）axios组件：
1）依赖下载和配置：
2）使用方式
2.2）router组件：
1）依赖下载
2）配置：
2 .1）router.js创建router对象
2.2）引入router对象。
一、vue项目的创建：
开发软件下载：
使用node.js 和 vs code，这两个软件一键安装就ok
node.js版本通常选择18.3以上的稳定版本
依赖下载配置代理路径：
node.js的npm代理地址记得使用淘宝镜像源，在cmd中：
npm config set registry https://registry.npmmirror.com
创建方式一：
0）参照官网快速创建的流程
1）从文件资源管理器找个文件夹输入cmd进入：
2）执行命令
npm create vue@latest cd vue-first //进入创建的vue项目中 npm install npm run dev
创建的其他方式：
官网给出的创建方式一是轻量级的项目，默认vue3
方式二是重量级的项目，并且可以选择创建vue2或者vue3，除了轻量级必要的配置还包含其它的配置，还默认给出了很多可能需要用到的依赖。
方式三也是轻量级的项目，只不过除了创建vue框架，还可以创建其他框架。
方式二：
npm install -g @vue/cli vue create vue-demo2
方式三：
npm init vite@latest
二、vue项目的使用
使用vscode打开创建好的vue项目
0）vue项目的构成：
index.html :
项目的入口界面，也是整个前端项目的唯一界面。所有其他页面的内容都展示在
通过定位<div id = "app">标签嵌套在div界面中。所以也经常叫它SPA（单网页应用程序）。
App.vue:
真正的主界面
main.js:
vue的配置文件，通常用来引入配置类对象
vue.config.js:
配置文件，设置路由和前端项目打包。
1）vue项目的运行：
1.0）一个.vue类型的文件分为三部分
temple ：
view层，也就是html的标签对象存放位置
script：
moudel层，也就是数据，方法的对象存放的位置
style：
css样式。
实质上.vue在解析后就是js文件；V，M层间通过MV中间件完成数据格式化最终转换为一堆html标签。
<template><template> <script></script> <style></style>1.1）启动服务
终端运行命令 npm run serve
1.2）访问主界面：
<template> //view <div> <input type="text" v-model="student.name"> //表单元素双向绑定数据使用v-model <hr> <a v-bind:href="url">点击跳转百度</a> //非表单元素单向绑定使用v-bind <hr> <span v-html="加粗内容"></span> //键入内容含标签元素 <hr> <span v-if="score<100">我爱你饺子</span> <span v-else-if="score>1000">他爱你皮特</span> <span v-else>布鲁斯拔萝卜</span> <hr> <li v-for="age1 in student.age" :key="age1" >{{age1}}</li> <hr> <input type="button" value="展示数据" @click="show"> <hr> <input type="button" @click="testPost" value="axios"> <hr> <div> <!-- <router-link to="/">Login</router-link> --> <router-link to="/add">Add</router-link> //路由跳转 <router-view></router-view> //路由跳转页面显示位置 </div> <HelloWorld></HelloWorld> </div> </template> <script> //model import HelloWorld from '@/components/HelloWorld.vue' import qs from "qs" export default{ components:{ HelloWorld }, data(){ return{ student:{ name:"张三", age:5 }, url:"https://www.baidu.com", 加粗内容:"<b>我不喜欢钱</b>", score:999 } }, methods:{ show(){ alert(JSON.stringify(this.student)) } , testPost(){ this.$axios({ url:"/demo", method:"post", data:qs.stringify({ //使用qs.stringify({}) 将json数据转换为普通的键值对表单数据，后端单元方法直接声明形参接收 //不使用qs.stringify({}) 直接发送请求体格式的请求数据，后端单元方法必须使用@RequestBody注解来接收 name:'张三', age:20 }) }).then(res=>{console.log(res)}) } } } </script> <style> </style>
2）vue的组件使用：
2.1）axios组件：
1）依赖下载和配置：
npm install --save axiosnpm install --save querystring
2）使用方式
axios的post请求默认传参为json格式，如果想和get一样使用url上的键值对匹配需要用到qs模块转换json数据。
testPost(){ this.$axios({ url:"/demo", method:"post", data:qs.stringify({ //使用qs.stringify({}) 将json数据转换为普通的键值对表单数据，后端单元方法直接声明形参接收 //不使用qs.stringify({}) 直接发送请求体格式的请求数据，后端单元方法必须使用@RequestBody注解来接收 name:'张三', age:20 }) }).then(res=>{console.log(res)}) }
2.2）router组件：
router模块用来设置服务器代理路径。
1）依赖下载
npm install --save vue-router2）配置：
需要在main.js文件中引入router对象，还要配置router对象的相关参数，一般单独创建一个文件配置router对象，再在main.js中引入router对象。
2 .1）router.js创建router对象
//从vue-router中导入createRouter和createWebHashHistory两个函数 import { createRouter, createWebHashHistory} from 'vue-router' //创建routes对象存储映射表 const routes=[ //配置映射 { path:'/', name:'Login', component:()=>import('../view/MyLogin.vue') }, { path:"/add", name:'Add', component:()=>import('../view/MyAdd.vue') } ] //创建router对象 const router=createRouter({ history:createWebHashHistory(), routes:routes }) export default router2.2）引入router对象。
