Spring Boot+Vue前后端分离项目练习06之网盘项目创建vue项目_springboot前后端分离的云盘项目

1.安装环境

构建vue项目，需要提前安装相应的环境，这里主要就是node，npm和Vue CLl。

#1、安装nodejs
brew install nodejs
#2、再执行下面命令来安装npm(npm是开发nodejs时所用的依赖库)
brew install npm
#3、安装vue cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
1
2
3
4
5
6
7
8

这些环境的安装还会比较简单的，其他平台的安装也是基本一致的，接着查看环境的安装情况。

node --version 
vue --version
1
2

2.创建vue项目

切换到具体的目录下，使用以下指令就可以完成vue项目。

vue create file-web
1

?Please pick a presset（Use arrow keys）这一行是提示行，后面的每一个依赖安装都会以这样的提示开头，紧接着的是选项列表。用键盘上下键可切换选中项（高亮蓝色），回车键确定选中。

这里我们采用Manually select features来手动安装一些依赖。

接着选择你需要的功能。仍然是键盘上下键控制选中项，这里采用空格键选中或取消选中当前项。这里我们选中下图中的几个功能：选择Vue版本，安装Babel、Router、Vuex、CSS预编译器和格式化检查，回车键确定。

接着选择Vue.js版本，此实验采用2.x。

接着都是同样的流程，选择自己需要的选项确定即可。

路由是否采用history模式（HTML5 History 模式 | Vue Router），选择是。输入Y，回车键确定。

选择一个CSS预编译器，可以选择任意一个，这里选用Stylus。

选择一个插件化的JavaScript代码检测和格式化工具 ，此处采用ESLint width error prevention only。

何时检测代码，此处采用Lint on save保存文件时测试。

如何存放配置，选择保存到专用的配置文件中。

是否保存本次配置（y：记录本次配置，然后需要给配置命名，N：不记录本次配置），这里选择 N。

接着会自动开始安装各种依赖。

进度100%后，项目就创建成功了，同时也会给出提示。

使用以下指令启动项目。

cd file-web
npm run serve
1
2

接着使用上面的地址即可访问项目了，出现以下画面就说明项目成功创建并启动了。

同时还可以使用图形化的方式创建项目，这里就不具体演示了，使用以下指令就可以在浏览器开启图形化创建项目的界面。

vue ui 
1

3.项目结构

这里使用webstorm打开项目，稍微看一下项目的具体结构。

node_modules：存放项目的各种依赖。

public：存放静态资源，其中的index.html是项目的入口文件，浏览器访问项目的时候默认打开的是生成后的index.html。

src：存放项目主体文件：

• assets：存放各种静态文件，包括图片、CSS文件、JavaScript文件、各类数据文件等。
• components：存放公共组件，例如顶部导航栏Header.vue。
• router/index.js：vue-router安装时自动生成的路由相关文件，主要用来为每个路由设置路径、名称和对应页面的 .vue 文件等。
• store/index.js：vuex安装时自动生成的状态相关文件，用来让多个页面或组件共享数据。
• views：存放页面文件，比如默认生成的Home.vue首页、About.vue关于页面。
• App.vue：是主vue模块，主要是使用router-link 引入其他模块，所有的页面都是在 App.vue下切换的。
• main.js：是入口文件，主要作用是初始化vue示例、引用某些组件库或挂载一些变量。

.eslintrc：配置代码校验ESLint规则。

.gitignore：配置git上传时想要忽略的文件。

babel.config.js：一个工具链，主要用于兼容低版本的浏览器。

package.json：配置项目名称、版本号，记录项目开发所安装的依赖的名称、版本号等。

package-lock.json：记录项目安装依赖时，各个依赖的具体来源和版本号。

4.安装Element UI

Element UI是一套基于Vue 2.0的桌面端组件库，其中的很多组件可以帮助我们快速搭建页面。进入file-web目录使用下面的指令安装Element UI。

npm i element-ui -S
1

引入Element UI的方式，在src/main.js中补充以下内容：

import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

Vue.use(ElementUI);
1
2
3
4

4.1 组件的基本使用

进入element ui中文官网，选择需要的组件引入即可，这里选择一个按钮即可。


启动项目查看效果：npm run serve

4.2 组件的属性

为按钮添加属性，例如type=“primary”，此时就可以改变按钮的形状。

4.3 组件事件

启动项目查看效果：npm run serve

5.创建顶部导航与路由

5.1 基本页面创建及路由添加

这里需要自己构建的文件，所以将自动生成的文件删除，保持整个项目的整洁。

在views文件夹下，创建home.vue文件，为其添加路由。
home.vue

<template>
  <div class="home">这是网盘主页</div>
</template>

<script>
  export default {
    name: 'HomeView',
    data() {
      return {}
    },
    methods: {}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

在src/router/index.js文件中，需要引入vue-router模块、挂载在Vue上，接着需要创建路由列表，包含路径、路由名称、页面文件等配置，之后创建路由实例并导出，然后在 src/main.js中引入并使用即可。
index.js

import Vue from 'vue'
import VueRouter from 'vue-router'             // 引入vue-router模块
import Home from '../views/Home.vue'           // 引入Home页面对应的文件

Vue.use(VueRouter)       // 将VueRouter挂载在Vue上

const routes = [
  {
    path: '/',          // 路由路径，即浏览器地址栏中显示的URL
    name: 'Home',       // 路由名称
    component: Home     // 路由所使用的页面
  }
]

// 创建路由实例
const router = new VueRouter({
  mode: 'history',             // HTML5 History 模式
  base: process.env.BASE_URL,
  routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在src/assets下新建style文件夹，然后在该文件夹下新建base.styl文件，设置所有元素的外边距和内边距均为 0px：

* {
  margin: 0;
  padding: 0;
}
1
2
3
4

然后在src/main.js中引入此样式文件，所有页面使用该样式。

import './assets/style/base.styl'
1

最后创建其余的页面及路由添加。
Login.vue

<template>
  <div class="login">这是登录页面</div>
</template>

<script>
export default {
  name: 'LoginView',
  data() {
    return {}
  },
  methods: {}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

Register.vue

<template>
  <div class="register">这是注册页面</div>
</template>

<script>
export default {
  name: 'RegisterView',
  data() {
    return {}
  },
  methods: {}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

Error_404.vue

<template>
  <div class="error-404">此页面不存在……</div>
</template>

<script>
export default {
  name: 'Error_404'
}
</script>
1
2
3
4
5
6
7
8
9

添加路由：

import Vue from 'vue'
import VueRouter from 'vue-router'             // 引入vue-router模块
import Home from '../views/Home.vue'           // 引入Home页面对应的文件

Vue.use(VueRouter)       // 将VueRouter挂载在Vue上

const routes = [
  {
    path: '/',          // 路由路径，即浏览器地址栏中显示的URL
    name: 'Home',       // 路由名称
    component: Home     // 路由所使用的页面
  },
  {
    path: '/login', //  登录页面
    name: 'Login',
    component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue')
  },
  {
    path: '/register', //  注册页面
    name: 'Register',
    component: () => import(/* webpackChunkName: "register" */ '../views/Register.vue')
  },
  {
    path: '*',  //  404页面
    name: 'Error_404',
    component: () => import(/* webpackChunkName: "error_404" */ '../views/Error_404.vue')
  }
]

// 创建路由实例
const router = new VueRouter({
  mode: 'history',             // HTML5 History 模式
  base: process.env.BASE_URL,
  routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

为这些页面添加链接，在src/App.vue中的中添加首页、登录、注册页面的跳转链接。

<template>
    <div id="app">
      <div id="nav">
        <router-link to="/">首页</router-link> |
        <router-link to="/login">登录页面</router-link> |
        <router-link to="/register">注册页面</router-link> |
      </div>
      <router-view />
    </div>
</template>

<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

启动项目测试一下：

5.2 创建顶部导航栏

在src/components下创建文件 Header.vue。

<template>
  <el-menu :default-active="activeIndex" :router="true" mode="horizontal">
    <el-menu-item index="Home" :route="{ name: 'Home' }">首页</el-menu-item>
    <el-menu-item index="Login" :route="{ name: 'Login' }">登录</el-menu-item>
    <el-menu-item index="Register" :route="{ name: 'Register' }">注册</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'HeaderView',
  data() {
    return {}
  },
  computed: {
    // 当前激活菜单的index
    activeIndex() {
      return this.$route.name //  获取当前路由名称
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

其中的el-menu即为Element UI中的NavMenu导航菜单，:router="true"表示使用 vue-router的模式， index是每个导航菜单的唯一标志，这里配置为各个页面对应的路由名称 name，default-active为当前激活菜单的 index，为了刷新页面时也可以保证停留在当前页面，这里采用计算属性的方式给activeIndex赋值。中的属性route为Vue Router路径对象，即要跳转到的页面的路由对象。

在src/App.vue中引入、注册并使用此组件。

<template>
  <div id="app">
    <!-- 3.使用组件 -->
    <Header></Header>
    <router-view/>
  </div>
</template>

<script>
import Header from '@/components/Header.vue' // 1.引入组件

export default {
  name: 'App',
  //  2. 注册组件
  components: {
    Header
  }
}
</script>

<style lang="stylus">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

启动项目测试一下：