# 安装nodejs
从 nodejs官网 (opens new window) 下载对应操作系统的稳定版本并安装
提示
建议安装v14.16.1及以上的稳定版本
运行命令查看安装的版本
node --version
1
# 安装npm
由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:
npm -v
1
# 设置npm的淘宝源
由于网速等原因，为了加快访问速度，建议设置npm的源为淘宝源
# 如果是npm
npm config set registry https://registry.npm.taobao.org
# 如果是yarn
yarn config set registry https://registry.npm.taobao.org
1
2
3
4
2
3
4
提示
注意安装过程中由于目录权限等原因，安装失败，如果是mac或linx等系统，可在命令前面加sudo前缀或设置该目录为可读写即可。
# 创建项目
# 下载模块方式
平台提供了一个完整项目的模板，你可以用它们快速地搭建一个基于 SEI-UI 的项目。
下载完成后后，进入项目，更改项目的名称等。
提示
建议采用下载模板方式创建项目。
# 手动创建方式
采用vue官方提供的vue-cli命令方式创建。
1.安装vue-cli
npm install vue-cli -g
1
2.创建项目,例如创建test项目
vue create test
1
3.添加平台组件
npm install sei-ui@4.0.0 --registry=http://202.202.43.5:82/repository/sei-npm-group/ --save
1
提示
需要注册平台仓库权限，否则无法下载。
用户名密码可咨询重庆邮电大学数字媒体技术研究所或者数创智联(重庆)信息技术有限公司。
# 注册平台仓库权限
项目需注册平台仓库权限，否则无法下载，命令如下:
npm login --registry=http://202.202.43.5:82/repository/sei-npm-group/
1
提示
用户名密码可咨询重庆邮电大学数字媒体技术研究所或者数创智联(重庆)信息技术有限公司。
# 配置项目
# 配置package.json
配置项目package.json，内容大概如下：
点击查看package.json内容
{
"name": "sei-ui-doc",
"version": "1.0.0",
"private": true,
"scripts": {
"webpack": "webpack --version",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"un-sei-ui": "npm uninstall sei-ui --save-dev",
"in-sei-ui": "npm install sei-ui@4.0.0 --registry=http://202.202.43.5:82/repository/sei-npm-group/ --save",
"reInstall": "rm -rf node_modules && rm -rf package-lock.json && npm run in-sei-ui && npm i"
},
"dependencies": {
"axios": "^0.21.1",
"bpmn-js": "^8.3.1",
"camunda-bpmn-moddle": "^5.1.2",
"clipboard": "^2.0.8",
"core-js": "^2.6.12",
"echarts": "^5.1.0",
"el-tree-transfer": "^2.4.7",
"element-ui": "^2.15.3",
"exceljs": "^4.2.1",
"fibers": "^5.0.0",
"highlight.js": "^10.7.2",
"js-base64": "^3.6.0",
"js-beautify": "^1.13.13",
"js-cookie": "^2.2.1",
"lodash": "^4.17.21",
"luckyexcel": "^1.0.1",
"markdown-it": "^12.0.6",
"markdown-it-anchor": "^7.1.0",
"markdown-it-chain": "^1.3.0",
"markdown-it-container": "^3.0.0",
"mavon-editor": "^2.9.1",
"md5": "^2.3.0",
"monaco-editor": "^0.24.0",
"monaco-editor-webpack-plugin": "^3.1.0",
"qs": "^6.10.1",
"quill": "^1.3.7",
"quill-image-drop-module": "^1.0.3",
"quill-image-resize-module": "^3.0.0",
"sass": "^1.32.11",
"sass-loader": "^10.1.1",
"screenfull": "^5.1.0",
"sql-formatter": "^4.0.2",
"transliteration": "^2.2.0",
"uuid": "^8.3.2",
"vue": "^2.6.12",
"vue-cron": "^1.0.9",
"vue-pdf": "^4.2.0",
"vue-router": "^3.5.1",
"vue-template-compiler": "^2.6.12",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2",
"worker-loader": "^3.0.8",
"pdfjs-dist": "~2.7.570"
},
"devDependencies": {
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
"@babel/plugin-proposal-optional-chaining": "^7.13.12",
"@vue/cli": "^3.12.1",
"@vue/cli-plugin-babel": "^3.12.1",
"@vue/cli-plugin-eslint": "^3.12.1",
"@vue/cli-service": "^3.12.1",
"babel-eslint": "^10.1.0",
"babel-plugin-component": "^1.1.1",
"babel-plugin-import": "^1.13.3",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^7.1.0",
"mockjs": "^1.1.0",
"webpack": "^4.46.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "3.11.2"
}
}
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
# 配置vue.config.js
配置项目vue.config.js，内容大概如下：
点击查看vue.config.js内容
let webpack = require('webpack');
let monacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
chainWebpack: config => {
config.plugin('provide').use(webpack.ProvidePlugin, [{'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js'}]);
config.plugin('monaco-editor').use(monacoWebpackPlugin);
config.resolve.symlinks(true);
config.plugin('MiniCssExtractPlugin').use(require('mini-css-extract-plugin'));
},
runtimeCompiler: true,
outputDir: 'dist', /* 输出文件目录 */
publicPath: './',
productionSourceMap: false,
css: {
extract: true, /* 是否使用css分离插件 ExtractTextPlugin */
sourceMap: false, /* 不开启 CSS source maps */
loaderOptions: {}, /* css预设器配置项 */
modules: false /* 启用 CSS modules for all css / pre-processor files */
},
devServer: {
hot: true, /* 开启热点 */
inline: true, /* 开启页面自动刷新 */
progress: true, /* 显示打包的进度 */
disableHostCheck: true,
open: true,
watchOptions: {
aggregateTimeout: 300
},
proxy: {
'/': {
target: 'http://127.0.0.1:8081', /* 后台服务器地址 */
hot: true,
ws: false,
changeOrigin: true
}
}
},
lintOnSave: false,
transpileDependencies: ['sei-ui']
};
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
38
39
40
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
38
39
40
# 配置babel.config.js
配置项目babel.config.js，内容大概如下：
module.exports = {
presets: [['@vue/babel-preset-app', {useBuiltIns: 'entry', 'corejs': 2}]],
plugins: [
'@babel/plugin-proposal-nullish-coalescing-operator', // 双问号
'@babel/plugin-proposal-optional-chaining', // 可选链
['import', {libraryName: 'sei-ui', 'libraryDirectory': 'src/components'}, 'sei-ui'],
['component', {libraryName: 'element-ui', 'styleLibraryName': 'theme-chalk'}, 'element-ui']
]
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 配置postcss.config.js
配置项目postcss.config.js，内容大概如下：
module.exports = {
plugins: {
autoprefixer: {} /* 自动补全css前缀 */
}
};
1
2
3
4
5
2
3
4
5