1.使用vue-cli3脚手架初始化项目
注：安装前确保有安装node，并且node >= 8.9 （推荐 8.11.0+）
全局安装vue
npm install -g @vue/cli
如果之前安装了vue旧版本，查看 vue --version，如果不是3.X，请先卸载再安装 npm uninstall vue-cli -g
创建项目
使用以下命令创建新项目：
vue create my-project
注：名称不能采用驼峰命名
vue-cli3也可以采用UI面板进行配置，相对比较方便，但是通过可视化配置的时候，有时候有些依赖包会安装出错。
运行该命令后，会有两个选择：
- default (babel, eslint) ，默认套餐，提供 babel 和 eslint 支持。
- Manually select features，自己去选择需要的功能，提供更多的特性选择。如果想要支持 TypeScript，就应该选择这一项。
回车后可进行选择，8个功能特性，可以多选：
使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。我的选择如下，请根据自己需要进行选择。
对于每一项的功能，此处做个简单描述：
- TypeScript 支持使用 TypeScript 书写源码
- Progressive Web App (PWA) Support PWA 支持
- Router 支持 vue-router
- Vuex 支持 vuex
- CSS Pre-processors 支持 CSS 预处理器
- Linter / Formatter 支持代码风格检查和格式化
- Unit Testing 支持单元测试
- E2E Testing 支持 E2E 测试
是否保存时或者提交时是进行ESlint校验，根据自己需要选择。（我选择保存）
要不要把当前的这一系列选项配置保存起来，方便下一次创建项目时复用，我选择n。
以上选择完后，项目就开始初始化了，初始化时会默认安装依赖包，完成后运行两条命令，项目即可启动:
cd my-project
npm run serve
项目初始化目录如下：
2.项目中引入element-ui
安装element-ui
通过以下命令安装element-ui到项目中。
npm i element-ui -S
引入 Element
可以引入整个 Element，或是根据需要仅引入部分组件。这里只介绍如何引入完整的 Element。
完整引入
在项目文件夹下的 main.js文件中写入以下内容：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
3.路由设置
路由设置在router/index.js下里设置，可以设置多级路由，实例如下：
{
path: "/search",
name: "search",
component: Search,
children: [
{
path: "",
component: AllList
},
{
path: "item",
component: ItemList
},
{
path: "book",
component: BookList
},
{
path: "article",
component: ArticleList
},
{
path: "image",
component: ImageList
}
]
}
跳转路由通过<router-link>进行跳转进入路由页面,to后面是跳转链接。
<router-link to="/search">
<el-menu-item index="1">全部</el-menu-item>
</router-link>
因为页面会有重复的地方，例如页头、页脚，我们可以把相似的部分写在主页面或者父页面中，其他不同的地方通过在上级页面的 <router-view />标签占位即可。可多级嵌套。示例如下：
<el-container>
<el-header>Header</el-header>
<el-container class="container-box">
<div class="side-box">
<p class="display_center head_meun">导航</p>
<el-menu default-active class="el-menu-vertical-demo">
<router-link to="/search">
<el-menu-item index="1">全部</el-menu-item>
</router-link>
<router-link to="/search/item">
<el-menu-item index="2">条目</el-menu-item>
</router-link>
<router-link to="/search/book">
<el-menu-item index="3">书籍</el-menu-item>
</router-link>
<router-link to="/search/article">
<el-menu-item index="4">文章</el-menu-item>
</router-link>
<router-link to="/search/image">
<el-menu-item index="5" class="last-menu">图片</el-menu-item>
</router-link>
</el-menu>
</div>
<div class="main-box">
//占位
<router-view />
</div>
</el-container>
<el-footer>Footer</el-footer>
</el-container>
4.引入后端接口
创建services文件件
在文件夹中创建与后台对接的接口
撰写接口
一般接口基本都是增删改查操作，在接口文件中跟后端人员对接好路由之后，就可以进行了。
示例如下：
import axios from 'axios';
import {response_handle} from './response_handle';
var getRelation = function(condition) {
return axios.get(`/v1/relation`, {params:condition})
.then(response_handle());
}
export {
getRelation
}
此外需要一个通用的结果处理函数response_handle，示例如下：
var response_handle = function() {
return function(res) {
// console.log(res,'res')
if(res.status == 200) return res.data.result;
else throw new Error(res.data.message);
}
}
var errorResponse_handle = function() {
return function(err) {
// console.log(err.response,'response error')
var message = '未知错误';
if (err && err.response) {
message = errorCode_message(err.response.status, err.response.data.message);
}
return Promise.reject({message:message,statusCode:err.response.data.statusCode});
}
}
var errorCode_message = function(code, defaultMessage) {
var message = '';
switch(code) {
case 400:
message = '请求错误'
break
case 401:
message = '令牌过期，请重新登录'
setTimeout(()=>{
window.location.href="/login";
}, 1000)
break
case 403:
message = '您无权操作'
break
case 404:
message = `请求地址出错`
break
case 408:
message = '请求超时'
break
case 409:
message = '资源冲突'
break
case 410:
message = '资源不存在或被删除'
break
case 500:
message = '服务器内部错误'
break
case 501:
message = '服务未实现'
break
case 502:
message = '网关错误'
break
case 503:
message = '服务不可用'
break
case 504:
message = '网关超时'
break
case 505:
message = 'HTTP版本不受支持'
break
default:
message = defaultMessage || '未知错误';
}
return message;
}
export {
response_handle,
errorResponse_handle,
errorCode_message
}
以上就是在服务中添加接口的步骤，下面说一下，如何在Vue文件中引入接口文件。
Vue中引入接口
- 在Vue文件的
<script>标签中，引入接口，引入之后就可以是使用该接口了
import { getRelation } from "@/services/relation";
- 由于一般是从后台获取数据，填充页面，所以一般是是在mounted周期内调用接口,可以在mounted中写函数，也可以在methods中写完后，直接调用。
mounted() {
this.getRelation();
}
- 在methods中编写接口调用函数
getRelation(){
return getRelation()
.then(res => {
this.relationNode = res;
this.drawChart(res);
})
.catch(err => {
this.$message({
showClose: true,
type: "error",
message: `关系图谱节点数据加载出错。原因：${err.message}`
});
})
}
5.引入css文件
如果一个页面或者组件中的样式比较少，我们直接写在Vue文件里的<style> </style>里面即可，但是当样式太多时，最好还是把css独立出来比较好。
在vue文件中，引入css文件常用的两种方式：
- 使用src
<style src="./index.css"><style>
- 使用@import
<style> @import './index.css' </style>
因为没有加 scoped ，以上两种方式没有什么区别，作用域都是全局。
如果加上scoped呢？是否作用域都变成局部了？
<style scoped src="./index.css"><style>
<style scoped> @import './index.css' </style>
加载结果跟我们预想的不一样，只有一个写法作用域在局部，即第一种写法src引入方式。为什么呢？ 我们来看一下使用以上两种方式引入在编译后，代码的区别：
- @import引入编译后代码如下：
- src方式引入编译后代码如下：
明显看出，src方式引入，每个css样式都自动添加一个唯一的属性(例如：data-v-469af010)，此数属性为组件内 CSS 指定作用域，和直接写在<style scoped>...</style>中效果是一样的，而@import的引入方式没有此属性，作用域为全局。
总结：
- vue中，css指定作用域有两种方式：
- ① 传统写在Vue文件中带有scoped属性的<
style>……</style>标签中 - ② 使用src引入css文件
- ① 传统写在Vue文件中带有scoped属性的<
- css文件引入方式：
- @import方式引入css文件作用域是全局,不管写在那个文件中
- src引入css文件作用域是制定作用域
