asp-smart-layout

SmartLayout2.0 开发指南

安装

cnpm i asp-smart-layout -S

注意： 如果本项目已经安装了 SmartLayout 1.X 的版本，请运行cnpm i asp-smart-layout@2.x 的命令，指定安装 2.X 的某个版本。

全量加载

import Vue from 'vue'
import form from 'asp-smart-layout/lib/form'
import table from 'asp-smart-layout/lib/table'
import portal from 'asp-smart-layout/lib/portal'
import 'asp-smart-layout/lib/theme-chalk/zhengqi/index.css'

Vue.use(form)
Vue.use(table)
Vue.use(portal)

new Vue({
  el: '#app',
  render: (h) => h(App)
})

按需加载

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

老版本脚手架

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "asp-smart-layout",
         style: false
      }
    ]
  ]
}

新版本脚手架

然后，将 babel.config.js 修改为：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    // element官方教程
    [
      'component',
      {
        libraryName: 'asp-smart-layout',
        style: false
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 table 和 form main.js 中写入以下内容：

import Vue from 'vue'
import { table } from 'asp-smart-layout'
import App from './App.vue'

Vue.use(table)

new Vue({
  el: '#app',
  render: (h) => h(App)
})

主题安装

目前提供 3 中主题，分别是：

• 经典（老 webbas）
• 政企
• 服务业务线 安装方式如下：

import 'asp-smart-layout/lib/theme-chalk/classic/index.css' // 经典
import 'asp-smart-layout/lib/theme-chalk/zhengqi/index.css' // 政企
import 'asp-smart-layout/lib/theme-chalk/spider/index.css' // 服务业务线

新发布说明

步骤：登录、打包、发布

登录
npm login --registry https://registry.npmjs.org

打包
npm run dist

发布
npm publish --registry https://registry.npmjs.org

查询 npm 上当前项目版本号

npm view 【项目名称】 versions

最新
npm view asp-smart-layout version

历次
npm view asp-smart-layout versions

查看历次发布版本及发布时间，精确到秒
npm view asp-smart-layout time --json

站点发布指令

npm run build

路径： cd /usr/local/nginx/html/smartfront/