技师学院18网络研修课程-VUE基础知识点巩固

1.安装vue-cli
在命令提示符下执行如下命令

npm install -g @vue/cli

install 简写方式 i 表示安装依赖
-g 表示全局安装

安装vue-cli后可以在命令提示符中使用vue命令进行创建项目，命令如下

#vue create <项目名称>
vue create demo01

创建名称为demo01的项目，可以快速创建项目。vue-cli官方文档链接

可以通过npm i的方式进行依赖安装，比如vue-router，vant
如果需要安装指定版本，需要后面@符合并且跟上版本号
例如安装指定版本路由

npm i vue-router@3.5.2

安装V2版本的vant，其中-S表示保存到package.json

npm i vant@latest-v2 -S

通过vue命令创建的项目为SPA模式项目。
【知识点】

SPA是什么?

1.单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序

SPA和普通模式的区别及其优势:

单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序：
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势
减少了请求体积，加快页面响应速度，降低了对服务器的压力(以前的开发是jsp,现在是html–静态页面不用访问服务器)

传统开发:url跳jsp页面

SPA项目:url跳组件

SPA实现思路

1、确保引入vue-router组价
2、首先需要定义组件，不同的组建用于展示不同页面信息
3、需要将不同的组件放入一个容器中，称为路由集合
4、将路由集合组装成路由器，并挂载到Vue实例中

创建路由器实例,然后传 routes 配置

 const router = new VueRouter({routes:routes});

注1：route和router的区别
route：路线
router：路由器
路由器中包含了多个路线

创建和挂载根实例。

  var vm = new Vue({router: router}).$mount('#app');

使用RouterLink和RouterView组件导航和显示

     <!-- 使用RouterLink组件导航. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <router-link to="/home">go to Home</router-link>
      <!-- 使用RouterView组件显示. -->
      <router-view></router-view> 

import和export

import是用于引入加载组建，格式用法如下
1.import <名称> from <组建地址>
2.import <组建地址> //通常用于加载css
名称是可以自定义的，组建地址必须是当前项目下或者是已经安装的依赖组建