Vue项目创建和使用

快速上手 | 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/clivue 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标签。

javascript"><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）依赖下载和配置：
javascript">npm install --save axios
javascript">npm 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）依赖下载
javascript">npm install --save vue-router
2）配置：

需要在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 router
2.2）引入router对象。