从零开始打造流程图、拓扑图项目【Nuxt.js + Element + Vuex】

一 、通过云开发平台快速创建初始化应用

1.创建相关应用模版请参考链接：基于 vue.js 的 SSR 技术—Nuxt.js

// 注意在后面提示中，上移下移，按空格选中 Element

2.完成创建后就可以在github中查看到新增的Nuxt仓库

二 、 本地编写 流程图、拓扑图项目

1.将应用模版克隆到本地

● 首先假定你已经安装了Git、node，没有安装请移步node官网进行安装。克隆项目：

git clone + 项目地址

● 进入项目文件

cd nuxtJs

● 切换到feature/1.0.0 分支上

git checkout feature/1.0.0

● 安装依赖包

npm install

● 启动服务

npm run dev

这里打开浏览器3000端口，并出现默认页面。

2.项目框架

选择Element后，在plugins文件夹下会自带添加Element的插件配置

完成后，在nuxt.config.js中配置head相关信息，主要有两个阿里字体文件： 左侧工具栏字体文件： //at.alicdn.com/t/font_1113798_0532l8oa6jqp.css

右侧属性字体图标： //at.alicdn.com/t/font_1331132_5lvbai88wkb.css

head: {
    title: '乐吾乐 Topology - 开源免费绘图工具',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content:
          '一个基于typescript + canvas的好用开源绘图工具和绘图引擎。易集成到自己的前端项目、还可以方便自定义图形库，支持微服务架构图、流程图、时序图、活动图、类图等'
      }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        href: '//at.alicdn.com/t/font_1113798_0532l8oa6jqp.css'
      },
      {
        rel: 'stylesheet',
        href: '//at.alicdn.com/t/font_1331132_5lvbai88wkb.css'
      }
    ]
  },

3.添加SCSS支持

● 安装scss的依赖包

yarn add node-sass sass-loader  -D 

● 给style标签加上lang="scss"标记

<style lang="scss">
.page {
  width: 100%;
  height: 100%;
}
</style>