feat: add website play

2026-03-13 07:51:17 +08:00 · 2020-08-25 09:58:26 +08:00
parent 02409b882a
commit 9b0bec0cd7
9 changed files with 2069 additions and 2085 deletions
--- a/package.json
+++ b/package.json
@@ -11,10 +11,11 @@
    "build": "yarn bootstrap && yarn build-storybook",
    "lint": "eslint ./packages --ext .vue,.js,.ts",
    "website-build": "webpack --config ./website/webpack.config.js",
-    "website-dev": "webpack-dev-server --config ./website/webpack.config.js"
+    "website-dev": "webpack-dev-server --config ./website/webpack.config.js",
+    "website-dev:play": "PLAY_ENV=true yarn website-dev"
  },
  "peerDependencies": {
-    "vue": "^3.0.0-rc.7"
+    "vue": "^3.0.0-rc.6"
  },
  "devDependencies": {
    "@babel/core": "^7.10.5",
@@ -27,7 +28,7 @@
    "@types/lodash": "^4.14.159",
    "@typescript-eslint/eslint-plugin": "^3.7.0",
    "@typescript-eslint/parser": "^3.7.0",
-    "@vue/compiler-sfc": "^3.0.0-rc.7",
+    "@vue/compiler-sfc": "^3.0.0-rc.6",
    "@vue/component-compiler-utils": "^3.2.0",
    "algoliasearch": "^4.4.0",
    "babel-loader": "^8.1.0",
@@ -88,6 +89,7 @@
  "license": "MIT",
  "dependencies": {
    "@popperjs/core": "^2.4.4",
+    "dayjs": "1.x",
    "lodash": "^4.17.20",
    "mitt": "^2.1.0"
  }
--- a/packages/locale/index.ts
+++ b/packages/locale/index.ts
@@ -8,7 +8,7 @@ export const t = (path:string): string => {
  let current = lang
  for (let i = 0, j = array.length; i < j; i++) {
    const property = array[i]
-    value = current[property] || property
+    value = current[property]
    if (i === j - 1) return value
    if (!value) return ''
    current = value
--- a/website/entry.js
+++ b/website/entry.js
@@ -16,7 +16,8 @@ import icon from './icon.json'

 import App from './app.vue'
 import install from 'element-plus'
-// import '../src/style/element-ui@2.13.2.css'
+if(process.env.NODE_ENV === 'development') require('../src/style/element-ui@2.13.2.css')
+

 const app = createApp(App)

--- a/website/index.tpl
+++ b/website/index.tpl
@@ -10,7 +10,9 @@
  <body>
    <div id="app"></div>
  </body>
-  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+  <% if (process.env.NODE_ENV === 'production') { %>
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+  <% } %>
  <% if (process.env.NODE_ENV === 'production') { %><script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
--- a/website/play.js
+++ b/website/play.js
@@ -1,10 +1,8 @@
-import Vue from 'vue'
-import Element from 'main/index.js'
+import { createApp } from 'vue'
+import install from 'element-plus'
 import App from './play/index.vue'
-import 'packages/theme-chalk/src/index.scss'
+import '../src/style/element-ui@2.13.2.css'
+const app = createApp(App)
+install(app)
+app.mount('#app')

-Vue.use(Element)
-
-new Vue({ // eslint-disable-line
-  render: h => h(App),
-}).$mount('#app')
--- a/website/play/index.vue
+++ b/website/play/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="margin: 20px;">
-    <el-input v-model="input" placeholder="请输入内容" />
+  <div>
+    <el-button>{{ value1 }}</el-button>
  </div>
 </template>

@@ -8,7 +8,7 @@
 export default {
  data() {
    return {
-      input: 'Hello Element UI!',
+      value1: 'TEST',
    }
  },
 }
--- a/website/route.config.js
+++ b/website/route.config.js
@@ -129,12 +129,6 @@ langs.forEach(lang => {
  route = route.concat(generateMiscRoutes(lang.lang))
 })

-route.push({
-  path: '/play',
-  name: 'play',
-  component: require('./play/index.vue'),
-})
-
 let userLanguage = localStorage.getItem('ELEMENT_LANGUAGE') || window.navigator.language || 'en-US'
 let defaultPath = '/en-US'
 if (userLanguage.indexOf('zh-') !== -1) {
--- a/website/webpack.config.js
+++ b/website/webpack.config.js
@@ -5,11 +5,12 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

 const isProd = process.env.NODE_ENV === 'production'
+const isPlay = !!process.env.PLAY_ENV

 module.exports = {
  mode: isProd ? 'production' : 'development',
  devtool: isProd ? 'source-map' : 'cheap-module-eval-source-map',
-  entry: path.resolve(__dirname, './entry.js'),
+  entry: isPlay ? path.resolve(__dirname, './play.js') : path.resolve(__dirname, './entry.js'),
  output: {
    path: path.resolve(__dirname, '../website-dist'),
    publicPath: '/',
--- a/yarn.lock
+++ b/yarn.lock