Spring Boot+Vue前后端分离项目练习06之网盘项目创建vue项目
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
这些环境的安装还会比较简单的，其他平台的安装也是基本一致的，接着查看环境的安装情况。
node --version
vue --version
2.创建vue项目
切换到具体的目录下，使用以下指令就可以完成vue项目。
vue create file-web
?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
接着使用上面的地址即可访问项目了，出现以下画面就说明项目成功创建并启动了。
同时还可以使用图形化的方式创建项目，这里就不具体演示了，使用以下指令就可以在浏览器开启图形化创建项目的界面。
vue ui
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
引入Element UI的方式，在src/main.js中补充以下内容：
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
Vue.use(ElementUI);
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>
在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
在src/assets下新建style文件夹，然后在该文件夹下新建base.styl文件，设置所有元素的外边距和内边距均为 0px：
* {
margin: 0;
padding: 0;
}
然后在src/main.js中引入此样式文件，所有页面使用该样式。
import './assets/style/base.styl'
最后创建其余的页面及路由添加。
Login.vue
<template>
<div class="login">这是登录页面</div>
</template>
<script>
export default {
name: 'LoginView',
data() {
return {}
},
methods: {}
}
</script>
Register.vue
<template>
<div class="register">这是注册页面</div>
</template>
<script>
export default {
name: 'RegisterView',
data() {
return {}
},
methods: {}
}
</script>
Error_404.vue
<template>
<div class="error-404">此页面不存在……</div>
</template>
<script>
export default {
name: 'Error_404'
}
</script>
添加路由：
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
为这些页面添加链接，在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>
启动项目测试一下：
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>
其中的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>
启动项目测试一下：
