Vue学习笔记

VUE笔记(一）

time: 2021/7/10

官方：介绍 — Vue.js (vuejs.org)

一、什么是vue

二、安装环境

​ 2.1. NodeJs (交互式编程)

​ 退出 : .exit

​ npm：node的模块管理

​ 2.2. 安装ES模块（vue)

​ npm install vue @vue/cli @vue/cli-init -g （-g 表示全局安装，安装在安装目录）

​ npm view vue 了解某一某块

​ npm install axios -save（安装在项目文件，出现在package里）

​ 2.3. VSCODE

​ vscode安装插件vetur

三、使用

3.1帮助

​ vue --help

3.2创建项目

1、命令行进入项目目录
2、输入命令：vue create “项目名”
3、等待项目安装完成
4、可以进入编辑（利用VScode）
5、在vscode终端输入npm run "命令"可执行相应命令
如： npm run server :开启服务器
npm run build: 编译

3.3目录结构

​ public： 存放html、js（JavaScript)

​ index.html：

​ src：(ES6.0)->WebPack翻译->前端 会产生一堆js、css文件插入页面

​ App.vue：插件，用于渲染

​ main.js：将App.vue替换到网页中

​ package.json：npm的管理配置文件（类似android 的 gradle、java里的maven）（npm install安装目录）（npm run运行寻找的文件）

​ dist：编译后最终要部署的文件

3.4还原(已有package.json)

​ 可将dist以及model文件夹删除（便于移动项目）

​ 还原指令：npm install (基于package.json)

3.5命令

​ package.json 中 script 括号下为可执行命令

​ | npm run “命令”

​ | 如 npm run serve （在serve命令后加 --open 可在执行完后自动打开网页）

四、语法

4.1基本语法

主要分为三个区：

<!--UI:HIML组件-->
<template>
  <div>
    主页面
  </div>
</template>
<!-- 数据与数据处理-->
<script>
export default {
  
}
</script>
<!--样式表-->

<style>

</style>

五、原理

5.1基本原理

​ main.js在运行后，会被webpack编译成xx.js、xx.html、xx.css文件插入到index.html中，然后会将APP.vue(名字可改)显示到页面中。我们主要通过对后者进行修改从而制作网页。

5.2 app.vue显示过程

• index.html有如下：

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-li8kWRw1-1625850146738)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210709220457934.png)]

• main.js有如下：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Fc8Zt9j-1625850146739)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210709220955407.png)]

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPqVdyrx-1625850146740)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210709220900914.png)]

  先将App.vue导入变成App对象，然后利用$mount(‘app’)对应index.html中的id将渲染的App.vue显示在index.html中。

5.3 .vue的模块插入过程

• 在

5.4 路由

通过路由可以跳转多个页面

• 加入路由模块

  npm install vue-router --save

• 实现path映射的页面

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cCXB8Ih4-1625850146742)(D:\DB\Typora\image-20210710004617265.png)]

• 建立路由

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OflWzGWF-1625850146742)(D:\DB\Typora\image-20210710004643503.png)]

• 导入路径path

  import login from "./components/login.vue"
  import main from "./components/main.vue"
  var routes = [
      {
          path: "/login.html",
          component: login,
      },
      {
          path: "/main.html",
          component: main,
      }
  ];
  
  export{routes}
  

  ​

  • 第一第二行将loing.vue和main.vue插入并转化为组件login 和 main
  • 定义变量 routes 将网页路径和组件配对
  • 最后一行export{routes}将routes权限外放

• 加载路由

  • 在main.js中导入

    import VueRouter from "vue-router"
    import {routes} from './routes'
    

  • 使用并生成路由器对象

    Vue.use(VueRouter);
    var router =new  VueRouter(
      {
        mode:"history",
        base:__dirname,
        routes,
      }
    );
    

  • 将router一起渲染

    new Vue({
      router,//加入
      render: h => h(App),
    }).$mount('#app')
    

• 使用效果

  运行后，根据配置的路由地址即可访问相应页面。