快速上手 | 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 axios

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）依赖下载

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对象。