SPA项目入门-Vue

一、入门

(一) SPA简介

目前流程的web前端开发模式为SPA(单页应用程序)

(二) 安装Vue项目环境

• ① 安装NodeJS

1. 将nodejs解压到D:/work目录下，并把文件夹改名为nodejs16
2. 配置nodejs安装路径为到系统环境变量path中
  path = D:\work\nodejs16

• ② 配置NodeJS环境

# 1. 设置npm镜像
npm config set registry https://registry.npm.taobao.org
# 2. 设置nodejs全局插件安装路径,路径就是nodejs安装路径
npm config set prefix D:/work/nodejs16
# 3. 设置nodejs全局插件安装路径，路径就是nodejs安装路径
npm config set cache D:/work/nodejs16
# 4. 设置nodejs全局插件缓存路径
npm install -g @vue/cli@4
  
# 5. 验证vue-cli版本
vue -V

• ③ 如果比较慢，可以取消ssl

1. 清空npm缓存
npm cache clean --force
2. 取消ssl
npm config set strict-ssl false

(三) 命令行创建Vue

• • ① 创建项目

vue create 项目目录

• • ② 启动项目

npm run serve

(四) WebStorm创建vue

1. 创建

• ① 创建vue项目

  

   

  

• ② 项目目录结构说明项目开发主要编写src下的代码。

  

• ③ 项目目录结构说明项目开发主要编写src下的代码。

  

2. 启动和访问

• ① 启动点击webstorm组下角的npm面板，双击serve启动。

  

• ② 访问：按照上述控制台的地址进行访问

⭐注意：默认访问页面是就是App.vue，也是Vue项目的唯一入口。

说明：首页类似于网站首页，或者app的入口界面，通常包含2部分信息：首页信息+导航菜单+跳转区域。

二、项目结构

(一) 项目结构介绍

1. 整体结构

1. App.vue

该页面是vue的单页应用项目的入口。

1. views

存放自定义vue页面的位置

1. assets

项目用到的静态资源路径，可以在vue页面中引用

1. router/index.js

定义vue页面的访问路径

(二) 路由标签

• 1. router-link：

相当于超链接a，控制跳转,to用来指定跳转vue页面，对应的path路径。

• 2. router-view：

跳转页面显示区域。

(三) App.vue定制

• 效果

• 代码

<template>
  <div id="app">
    <div class="header">
      <!-- 标题 -->
      <h2>数字教室</h2>
    </div>
    <div class="body">
      <div class="menu">
        <!-- 菜单项 -->
        <div class="menu-item">
          <router-link to="#">学生管理</router-link>
        </div>
        <div class="menu-item"><router-link to="#">老师管理</router-link></div>
        <div class="menu-item"><router-link to="#">课程管理</router-link></div>
        <div class="menu-item"><router-link to="#">用户中心</router-link></div>
      </div>
      <div class="main">
        <!-- 切换页面区域 -->
		<router-view/>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#app{
  height: 96vh;
  width: 99vw;
  display: flex;
  flex-direction: column;
}

.header{
  flex:1;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  border: goldenrod 1px solid;
}
.body{
  flex: 8;
  border: goldenrod 1px solid;
  display: flex;
  flex-direction: row;
}
.menu{
  flex: 1;
  background-color: rgb(234, 228, 228);
  display: flex;
  border: solid 1px goldenrod;
  flex-direction: column;
}

.main{
  flex: 10;
  padding: 10px;
  border: solid 1px goldenrod;
}
.menu-item{
  line-height: 40px;
  cursor: pointer;
  text-align: center;
  transition: all .5s;
  border: goldenrod 1px solid;
}
router-link{
  text-decoration: none;
  color: rgb(146, 112, 25);
}
.menu-item:hover{
  background-color: #333;
}

</style>

三、Vue程序开发

• （1）需求

• （2）学生管理开发

• • ① 在views中编写页面，文件命名规范为*.vue

⭐注意：

1. template中的标签必须有且只有一个父标签，所以建议在根部默认写一个div标签，再写其他标签。可以把根div当作body
2. div上不需要添加id属性，下面的export default会自动创建vue并绑定。

• • ② 学生页面：在views目录下创建目录student和List.vue页面。

<template>
    <div>
        <h1>学生管理</h1>
    </div>
</template>

<script>
export default {
	data:function(){
		return {
			msg:"vue属性值"
		}
	},
	methods:{
		
	}
}
</script>

<style>

</style>

• • ③ 在router/index.js中定义访问路径

说明：

path：跳转路径

component：导入vue页面

@：一个全局变量，表示当前项目的相对路径。

const routes = [
  {
    path: '/student/list', //跳转路径
    component: ()=>import("@/views/student/List.vue") //导入路径
  },
]

• • ④ 绑定跳转

在router-link中指定跳转路径：<router-link to="/student/list">学生管理</router-link>

• • 代码结构图

四、总结

(一) 编程跳转

在vue的methods的函数中this.$router.push("route路径")

(二) vue页面开发步骤

• ① 创建vue页面 xxx.vue

• • （页面内容可以使用vuter插件直接输入 vue提示生成）

• ② 定义跳转路径

• • 使用route的path属性定义跳转路径
  • 使用route的component属性，导入vue页面。

{
  path: '/student/list', //跳转路径
  component: ()=>import("@/views/student/List.vue") //导入路径
},

• ③ 绑定跳转

• • 使用router-link的to属性，指定跳转。