安装nodejs | SEI低代码开发平台文档(v6.0.0)

# 安装nodejs

从 nodejs官网 (opens new window) 下载对应操作系统的稳定版本并安装

提示

建议安装v14.16.1及以上的稳定版本

运行命令查看安装的版本

node --version

# 安装npm

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

npm -v

# 设置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

提示

注意安装过程中由于目录权限等原因，安装失败，如果是mac或linx等系统，可在命令前面加sudo前缀或设置该目录为可读写即可。

# 注册平台仓库权限

项目需注册平台仓库权限，否则无法下载，命令如下:

# 针对重邮校园网
npm login --registry=http://202.202.43.5:82/repository/sei-npm-group/

# 针对外网
npm login --registry=http://nexus.sczlcq.com/repository/sei-npm-group/

1
2
3
4
5
6

提示

用户名密码可咨询重庆邮电大学应用软件技术重点实验室或者数创智联(重庆)信息技术有限公司。

# 创建项目

# 下载模块方式

平台提供了一个完整项目的模板，你可以用它们快速地搭建一个基于 SEI-UI 的项目。
下载完成后后，进入项目，更改项目的名称等。

点击下载demo模板项目

提示

建议采用下载模板方式创建项目。

# 手动创建方式

采用vue官方提供的vue-cli命令方式创建。
1.安装vue-cli

npm install vue-cli -g

2.创建项目,例如创建test项目

vue create test

3.添加平台组件

# 针对重邮校园网
npm install  sei-ui@6.0.0 --registry=http://202.202.43.5:82/repository/sei-npm-group/  --save

# 针对外网
npm install  sei-ui@6.0.0 --registry=http://nexus.sczlcq.com/repository/sei-npm-group/  --save

1
2
3
4
5

提示

需要注册平台仓库权限，否则无法下载。
用户名密码可咨询重庆邮电大学应用软件技术重点实验室或者数创智联(重庆)信息技术有限公司。

# 配置项目

# 配置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",
        "reInstall": "rm -rf node_modules && rm -rf package-lock.json && npm install --registry=http://nexus.sczlcq.com/repository/sei-npm-group/"
    },
    "dependencies": {
        "sei-ui": "^6.0.0"
    },
    "devDependencies": {
        "@babel/plugin-proposal-logical-assignment-operators": "~7.13.8",
        "@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",
        "babel-polyfill": "~6.26.0",
        "eslint": "~6.8.0",
        "eslint-plugin-vue": "~7.1.0",
        "mini-css-extract-plugin": "~0.8.2",
        "sass": "~1.32.11",
        "sass-loader": "~10.1.1",
        "webpack": "~4.47.0",
        "webpack-cli": "~4.10.0",
        "webpack-dev-server": "~3.11.3"
    }
}

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

# 配置vue.config.js

配置项目vue.config.js，内容大概如下：

点击查看vue.config.js内容

let monacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin')
module.exports = {
    chainWebpack: config => {
        config.plugin('monaco-editor').use(monacoWebpackPlugin, [{languages: ['html', 'css', 'javascript', 'typescript', 'json', 'mysql']}]);
    },
    configureWebpack: (config) => {
        config.entry.app = ['babel-polyfill', './src/main.js'];
        config.module.rules.push({
            test: /\.js/,
            enforce: 'pre',
            include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
            use: monacoWebpackPlugin.loader
        })
    },
    runtimeCompiler: true,
    outputDir: 'dist', /* 输出文件目录 */
    publicPath: './',
    productionSourceMap: false,
    lintOnSave: false,
    css: {
        extract: {ignoreOrder: true}, /* 是否使用css分离插件 ExtractTextPlugin */
        sourceMap: false, /* 不开启 CSS source maps */
        loaderOptions: {}, /* css预设器配置项 */
        modules: false /* 启用 CSS modules for all css / pre-processor files */
    },
    transpileDependencies: ['sei-ui'],

    devServer: {
        port: 8080,
        hot: true, /* 开启热点 */
        inline: true, /* 开启页面自动刷新 */
        progress: true, /* 显示打包的进度 */
        disableHostCheck: true,
        open: true,
        watchOptions: {
            aggregateTimeout: 300
        },
        proxy: {
            '/api': {
                target: 'http://localhost:8081', /* 后台服务器地址 */
                hot: true,
                ws: false,
                changeOrigin: true
            }
        }
    }
};

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

# 配置babel.config.js

配置项目babel.config.js，内容大概如下：

module.exports = {
    sourceType: 'unambiguous',
    presets: [
        ["@babel/preset-env", {targets: "> 1% in AU and not dead", shippedProposals: true}],
        ['@vue/babel-preset-app', {useBuiltIns: 'entry', 'corejs': 2}]
    ],
    plugins: [
        '@babel/plugin-proposal-nullish-coalescing-operator', // 双问号空置合并 ??
        '@babel/plugin-proposal-logical-assignment-operators', // 双问号空值赋值  ??=
        '@babel/plugin-transform-private-methods',
        '@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
10
11
12
13
14
15

# 配置postcss.config.js

配置项目postcss.config.js，内容大概如下：

module.exports = {
    plugins: {
        autoprefixer: {} /* 自动补全css前缀 */
    }
};

1
2
3
4
5

← Vue规范后端环境搭建 →