Skip to content

S
sj_interview
提交 0d7b2f5f authored 作者: fred's avatar fred
浏览文件
操作

初始提交项目

上级
流水线 #100 已取消 于阶段
      全部展开 隐藏空白字符变更
      内嵌 并排
      正在显示 包含 1285 行增加 和 0 行删除
      .eslintrc.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      module.exports = {
      root: true,
      env: {
      node: true
      },
      'extends': [
      'plugin:vue/essential',
      '@vue/standard'
      ],
      rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
      },
      parserOptions: {
      parser: 'babel-eslint'
      },
      overrides: [
      {
      files: [
      '**/__tests__/*.{j,t}s?(x)',
      '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
      jest: true
      }
      }
      ]
      }
      .gitignore 0 → 100644
      浏览文件 @ 0d7b2f5f
      .DS_Store
      node_modules
      /dist
      *.iml
      # local env files
      .env.local
      .env.*.local
      # Log files
      npm-debug.log*
      yarn-debug.log*
      yarn-error.log*
      # Editor directories and files
      .idea
      .vscode
      *.suo
      *.ntvs*
      *.njsproj
      *.sln
      *.sw?
      .project 0 → 100644
      浏览文件 @ 0d7b2f5f
      <?xml version="1.0" encoding="UTF-8"?>
      <projectDescription>
      <name>app_sj_wms</name>
      <comment></comment>
      <projects>
      </projects>
      <buildSpec>
      </buildSpec>
      <natures>
      </natures>
      </projectDescription>
      babel.config.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      module.exports = {
      presets: [
      '@vue/cli-plugin-babel/preset'
      ]
      }
      package-lock.json 0 → 100644
      浏览文件 @ 0d7b2f5f
      差异被折叠。
      package.json 0 → 100644
      浏览文件 @ 0d7b2f5f
      {
      "version": "0.1.0",
      "private": true,
      "scripts": {
      "dev": "vue-cli-service serve",
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
      },
      "dependencies": {
      "core-js": "^3.6.4",
      "github-markdown-css": "^4.0.0",
      "highlight.js": "^10.0.2",
      "marked": "^2.0.0",
      "vue-cookies": "^1.7.3"
      },
      "devDependencies": {
      "@vue/cli-plugin-babel": "^4.2.0",
      "@vue/cli-plugin-eslint": "^4.2.0",
      "@vue/cli-service": "^4.2.0",
      "babel-eslint": "^10.0.3",
      "@vue/eslint-config-standard": "^5.1.2",
      "eslint-plugin-standard": "^4.0.1",
      "compression-webpack-plugin": "^3.1.0",
      "eslint": "^6.7.2",
      "eslint-plugin-vue": "^6.1.2",
      "eslint-plugin-import": "^2.20.2",
      "eslint-plugin-node": "^11.1.0",
      "eslint-plugin-promise": "^4.2.1",
      "mockjs": "^1.1.0",
      "sass": "^1.35.2",
      "sass-loader": "^10.0.1",
      "text-loader": "^0.0.1",
      "uglifyjs-webpack-plugin": "^2.2.0",
      "vue-template-compiler": "^2.6.11"
      },
      "eslintConfig": {
      "root": true,
      "plugins": [
      "example"
      ],
      "env": {
      "node": true,
      "example/custom": true
      },
      "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
      ],
      "parserOptions": {
      "parser": "babel-eslint"
      },
      "rules": {}
      },
      "browserslist": [
      "> 1%",
      "last 2 versions"
      ]
      }
      public/index.html 0 → 100644
      浏览文件 @ 0d7b2f5f
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
      <meta name="format-detection" content="telephone=no,email=no">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-touch-fullscreen" content="yes">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title>
      尚捷
      </title>
      <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
      <% } %>
      </script>
      </head>
      <body>
      <noscript>
      <strong>We're sorry but
      <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable
      it to
      continue.</strong>
      </noscript>
      <div id="app"></div>
      <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
      <% } %>
      </body>
      </html>
      public/static/css/index.css 0 → 100644
      浏览文件 @ 0d7b2f5f
      /** 样式 */
      .btn-group{
      padding: 4px;
      }
      .btn-group .ant-btn{
      margin-right: 5px;
      }
      .p-text{
      width: 100%;/* 要显示文字的宽度 */
      float: left;/* 左对齐，不设置的话只在IE下好用 */
      overflow: hidden; /* 超出的部分隐藏起来 */
      white-space: nowrap;/* 不显示的地方用省略号...代替 */
      text-overflow: ellipsis;/* 支持 IE */
      -o-text-overflow: ellipsis;/* 支持 Opera */
      }
      readme.md 0 → 100644
      浏览文件 @ 0d7b2f5f
      企业后台
      ## Project setup
      ```
      npm install
      ```
      ### Compiles and hot-reloads for development
      ```
      npm run serve
      ```
      ### Compiles and minifies for production
      ```
      npm run build
      ```
      ### Run your tests
      ```
      npm run test
      ```
      ### Lints and fixes files
      ```
      npm run lint
      ```
      ### Customize configuration
      See [Configuration Reference](https://cli.vuejs.org/config/).
      src/App.vue 0 → 100644
      浏览文件 @ 0d7b2f5f
      <template>
      <div id="app">
      <div :style="{'max-height':'1200px'}">
      <header-body></header-body>
      <div style="margin: 80px;background: #fff;min-width:900px">
      <div>
      <keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view></keep-alive>
      </div>
      <div>
      <router-view v-if="$route.meta.keepAlive"></router-view>
      </div>
      </div>
      </div>
      </div>
      </template>
      <script>
      export default {
      created() {
      },
      mounted() {},
      methods: {
      }
      };
      </script>
      <!-- 全局样式 -->
      <style>
      @import "../public/static/css/index.css";
      .el-input--small .el-input__inner {
      height: 28px !important;
      }
      body {
      background-color: #fafafa;
      }
      .ant-descriptions-bordered .ant-descriptions-item-label {
      background-color: #fafafa;
      text-align: right;
      }
      .ant-descriptions-bordered .ant-descriptions-item-content,
      .ant-descriptions-bordered .ant-descriptions-item-label {
      padding: 8px 10px;
      border-right: 1px solid #e8e8e8;
      }
      </style>
      src/api/axios.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      import axios from 'axios'
      //设置全局的请求次数，请求的间隙
      axios.defaults.retry = 3;
      axios.defaults.retryDelay = 2000;
      //创建axios的一个实例
      var instance = axios.create({
      baseURL: '',
      timeout: 6000
      })
      /**
      * 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，
      * 函数的参数及返回值如下：
      * @param {String} url 请求的url:
      * @param {String} method 请求的方法：get、post、delete、put
      * @param {Object} data 请求的参数
      * @returns {Promise} 返回一个promise对象，其实就相当于axios请求数据的返回值
      */
      export default function(url, method, data = null, callback) {
      method = method.toLowerCase();
      if (method == 'post') {
      return new Promise((resolve, reject) => {
      instance.post(url, data).then(res => {
      resolve(res)
      callback(res)
      }).catch(err => {
      reject(err)
      })
      })
      } else if (method == 'get') {
      return new Promise((resolve, reject) => {
      instance.get(url, {
      params: data
      }).then(res => {
      resolve(res)
      callback(res)
      }).catch(err => {
      reject(err)
      })
      })
      } else if (method == 'delete') {
      return new Promise((resolve, reject) => {
      instance.delete(url, {
      params: data
      }).then(res => {
      resolve(res)
      callback(res)
      }).catch(err => {
      reject(err)
      })
      })
      } else if (method == 'put') {
      return new Promise((resolve, reject) => {
      instance.put(url, data).then(res => {
      resolve(res)
      callback(res)
      }).catch(err => {
      reject(err)
      })
      })
      } else if (method == 'patch') {
      return new Promise((resolve, reject) => {
      instance.patch(url, data).then(res => {
      resolve(res)
      callback(res)
      }).catch(err => {
      reject(err)
      })
      })
      } else {
      console.error('未知的method' + method)
      }
      }
      src/api/index.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      //import req from './axios.js' //引入封装好的axios
      //*****************************头部的请求接口地址 start ***************************
      //*****************************请求接口地址 end ***************************
      src/components/base/header-menu.vue 0 → 100644
      浏览文件 @ 0d7b2f5f
      <template>
      <div>
      <a-menu v-model="current" mode="horizontal" :style="{'border':'0px','line-height':'60px','font-size':'16px'}">
      <a-menu-item key="explain" @click="goOpen('explain')"> <a-icon type="global" />技术选型</a-menu-item>
      <a-menu-item key="structure" @click="goOpen('structure')"> <a-icon type="deployment-unit" />结构</a-menu-item>
      <a-menu-item key="subject" @click="goOpen('subject')"> <a-icon type="appstore"/>题库</a-menu-item>
      <a-menu-item key="result" @click="goOpen('result')"> <a-icon type="highlight" />答题</a-menu-item>
      </a-menu>
      </div>
      </template>
      <script>
      export default {
      name: "header-menu",
      data() {
      return {
      current: [''],
      }
      },
      created() {
      },
      mounted() {
      },
      methods: {
      /**
      * 页面切换
      */
      goOpen(url){
      if(url){
      this.$router.push({path:"/"+url})
      }else{
      this.$router.replace('/')
      }
      }
      },
      }
      </script>
      <style scoped>
      .logo {
      height: 80px;
      width: 80px;
      }
      .text-area {
      display: flex;
      justify-content: center;
      }
      .title {
      font-size: 20px;
      color: black;
      }
      </style>
      src/components/base/header.vue 0 → 100644
      浏览文件 @ 0d7b2f5f
      <template>
      <div class="header" style="position: fixed;width: 100%;top: 0;z-index:999;" :style="{'box-shadow':showBackground?'none':'0 4px 8px 0 rgba(0,0,0,.06)'}">
      <a-card :style="{'border':'0px','background':'#fff'}" :bodyStyle="{'width':'100%','padding':'0'}">
      <div :style="{'max-width':'1200px','margin': '0 auto'}">
      <div :style="{'float': 'left','line-height': '60px','margin-right': '10px'}">
      <a href="http://www.sjkjgz.com">
      <img style="height:40px;cursor: pointer;" title="官网" src="/static/logo.png" />
      </a>
      </div>
      <div :style="{'float': 'left','line-height': '60px','margin-right': '30px','margin-left':'15px'}">
      <header-menu ></header-menu>
      </div>
      </div>
      </a-card>
      </div>
      </template>
      <script>
      export default {
      name: "header",
      data() {
      return {
      }
      },
      created() {
      },
      beforeDestroy: function() {
      },
      }
      </script>
      <style scoped>
      .scrollbar::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 7px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
      }
      .scrollbar::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
      background: #ededed;
      }
      .scrollbar::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
      border-radius: 10px;
      background: #fff;
      }
      </style>
      src/components/markdown/index.vue 0 → 100644
      浏览文件 @ 0d7b2f5f
      <template>
      <div class="component-markdown">
      <div class="spin-group" v-if="!markedHTML">
      <div>正在加载</div>
      </div>
      <div class="markdown-body" v-html="markedHTML"></div>
      </div>
      </template>
      <script>
      import highlight from 'highlight.js'
      export default {
      name: 'markdown',
      props: {
      url: {
      type: String,
      required: false,
      default: ''
      },
      source: {
      type: String,
      required: false,
      default: ''
      },
      highlight: {
      type: Boolean,
      required: false,
      default: false
      },
      },
      data () {
      return {
      getReadmePublicPath: '',
      markedHTML: ''
      }
      },
      mounted () {
      if (this.url) {
      } else if (this.source) {
      this.initWithMd()
      } else {
      console.log('not mounted init')
      }
      },
      methods: {
      // 使用 md 初始化
      initWithMd () {
      this.markedHTML = window.marked(this.source)
      },
      marked (data) {
      const renderer = new window.marked.Renderer()
      renderer.blockquote = (quote) => {
      return `<blockquote>${quote}</blockquote>`
      }
      return window.marked(data, {
      ...highlight ? { highlight: (code) => highlight.highlightAuto(code).value } : {},
      renderer
      })
      }
      }
      }
      </script>
      <style lang="scss">
      .component-markdown {
      .spin-group {
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #409EFF;
      }
      }
      </style>
      src/main.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      import Vue from "vue";
      import VueRouter from "vue-router";
      import App from "./App.vue";
      import store from "./store";
      import router from "./router";
      Vue.use(window.antd);
      import header from '@/components/base/header.vue'
      Vue.component('header-body', header)
      import headerMenu from '@/components/base/header-menu.vue'
      Vue.component('header-menu',headerMenu)
      import markdown from '@/components/markdown'
      Vue.component('markdown', markdown)
      Vue.config.productionTip = false;
      //开发环境开启mock模拟数据
      // if(process.env.NODE_ENV == 'development'){
      // require('./mock')
      // }
      let instance= null;
      /**
      * bootstrap 只会在子应用初始化的时候调用一次，下次子应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
      * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
      */
      export async function bootstrap({ fns = [] } = {}) {
      Array.isArray(fns) && fns.map(i => {
      Vue.prototype[i.name] = i
      });
      }
      /**
      * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
      */
      export async function mount({ data = {} } = {}) {
      instance = new Vue({
      router,
      store,
      render: h => h(App, { props: data })
      }).$mount("#app");
      const originalPush = VueRouter.prototype.push
      VueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
      }
      }
      /**
      * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载子应用的应用实例
      */
      export async function unmount() {
      instance.$destroy();
      instance = null;
      router = null;
      }
      /**
      * 单独开发环境
      */
      window.__POWERED_BY_QIANKUN__ || mount();
      src/mock/index.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      import Mock from 'mockjs'
      import open from './open/openMock'
      let data = [].concat(open);//逗号隔开
      data.forEach(function(res){
      Mock.mock(RegExp(res.url + ".*"),res.type,res.data);//地址（拼接项目的请求地址+模块地址+接口地址）、请求类型，返回的数据
      });
      export default Mock;
      \ No newline at end of file
      src/mock/open/openMock.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      import Mock from 'mockjs'
      const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据
      let data = [] // 用于接受生成数据的数组
      for (let i = 0; i < 10; i++) { // 可自定义生成的个数
      let template = {
      'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
      'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
      'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据
      'Color': Random.color(), // 生成一个颜色随机值
      'Paragraph': Random.paragraph(2, 5), //生成2至5个句子的文本
      'Name': Random.name(), // 生成姓名
      'Url': Random.url(), // 生成web地址
      'Address': Random.province() // 生成地址
      }
      data.push(template)
      }
      export default data;
      src/router/index.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      /**
      * 路由
      */
      import Vue from 'vue'
      import VueRouter from 'vue-router'
      Vue.use(VueRouter)
      import openRouter from "./open/openRouter.js"
      const routes = [].concat(openRouter)
      const router = new VueRouter({
      mode: "history",
      routes
      });
      export default router;
      src/router/open/openRouter.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      export default [
      {
      path: "/",
      name: "index",
      component: () => import("@/web/open/index.vue"),
      meta: {
      keepAlive: true //此组件需要被缓存
      }
      },
      /*技术选型*/
      {
      path: "/explain",
      name: "explain",
      component: () => import("@/web/open/explain.vue"),
      meta: {
      keepAlive: true //此组件需要被缓存
      }
      },
      /*项目结构*/
      {
      path: "/structure",
      name: "structure",
      component: () => import("@/web/open/structure.vue"),
      meta: {
      keepAlive: true //此组件需要被缓存
      }
      },
      /*题库*/
      {
      path: "/subject",
      name: "subject",
      component: () => import("@/web/open/subject.vue"),
      meta: {
      keepAlive: true //此组件需要被缓存
      }
      },
      /*结果页面(答题页面)*/
      {
      path: "/result",
      name: "result",
      component: () => import("@/web/dev/result.vue"),
      meta: {
      keepAlive: true //此组件需要被缓存
      }
      },
      {
      path: "/*",
      name: "Page 404",
      component: () => import("@/web/open/page404.vue"),
      meta: {
      keepAlive: true //此组件需要被缓存
      }
      }
      ]
      src/store/index.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      import Vue from 'vue'
      import Vuex from 'vuex'
      Vue.use(Vuex)
      //import modules from './modules'
      // https://webpack.js.org/guides/dependency-management/#requirecontext
      const modulesFiles = require.context('./modules', true, /\.js$/)
      // you do not need `import app from './modules/app'`
      // it will auto require all vuex module from modules file
      const modules = modulesFiles.keys().reduce((modules, modulePath) => {
      // set './app.js' => 'app'
      const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
      const value = modulesFiles(modulePath)
      modules[moduleName] = value.default
      return modules
      }, {})
      export default new Vuex.Store({
      modules,
      })
      src/store/modules/basedata.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      export default {
      namespaced: true,
      state: {
      },
      getters: {
      },
      mutations: {
      },
      actions: {
      }
      }
      src/web/dev/result.vue 0 → 100644
      浏览文件 @ 0d7b2f5f
      <!--
      题目答题区域
      @auth
      @data
      @remarks
      -->
      <template>
      <div>
      <div>
      答题页面
      </div>
      </div>
      </template>
      <script>
      export default {
      name: "result",
      data() {
      return {
      }
      },
      created() {
      },
      mounted() {
      },
      methods: {
      },
      }
      </script>
      <style scoped>
      </style>
      src/web/open/appstore.vue 0 → 100644
      浏览文件 @ 0d7b2f5f
      <template>
      <div>
      <div id="center">
      <a-row :gutter="50" style="max-width: 1200px;margin: 0 auto;">
      <a-col :xs="24" :sm="24" style="margin-top: 40px 0;">
      <div style="padding:20px 0">
      <h1 style="font-size:38px;font-weight: 600;">{{ title }}</h1>
      <h2 style="color:#1890ff;font-weight: 600;">前端说明</h2>
      <span style="font-size:16px;line-height: 24px;color: rgb(81, 86, 93);">
      vue基础说明
      </span>
      <br/>
      <a-button type="primary" ghost style="margin-top: 30px;height: 48px;width: 166px;border-radius: 30px;font-size: 18px;" @click="goOpen('home')">立即查看</a-button>
      </div>
      </a-col>
      </a-row>
      </div>
      </div>
      </template>
      <script>
      export default {
      name: "page",
      data() {
      return {
      title:'尚捷科技'
      }
      },
      created() {
      },
      mounted() {
      },
      methods: {
      /**
      * 页面切换
      */
      goOpen(url) {
      if (url) {
      this.$router.push({path: "/" + url})
      } else {
      this.$router.replace('/')
      }
      }
      },
      }
      </script>
      <style scoped>
      #center{
      width: 100%;
      text-align: center;
      }
      </style>
      src/web/open/explain.vue 0 → 100644
      浏览文件 @ 0d7b2f5f
      <template>
      <div>
      <a-row :gutter="50" style="max-width: 1200px;margin: 0 auto;">
      <a-col :xs="24" :sm="24">
      <markdown :source="explain" highlight/>
      </a-col>
      </a-row>
      </div>
      </template>
      <script>
      import explain from './md/explain.md'
      export default {
      name: "page",
      data() {
      return {
      explain
      }
      },
      created() {
      },
      mounted() {
      },
      methods: {
      },
      }
      </script>
      <style scoped>
      #center{
      width: 100%;
      text-align: center;
      }
      </style>
      src/web/open/index.vue 0 → 100644
      浏览文件 @ 0d7b2f5f
      <template>
      <div>
      <div id="center">
      <a-row :gutter="50" style="max-width: 1200px;margin: 0 auto;">
      <a-col :xs="24" :sm="24" style="margin-top: 40px 0;">
      <div style="padding:20px 0">
      <h2 style="font-size:38px;color:#1890ff;font-weight: 600;">面试人员答题</h2>
      <span style="font-size:16px;line-height: 24px;color: rgb(81, 86, 93);">
      请根据题库内容用所给技术选型失效具体功能,详情代码请在答题区域作答
      </span>
      <br/>
      <a-button type="primary" ghost style="margin-top: 30px;height: 48px;width: 166px;border-radius: 30px;font-size: 18px;" @click="goOpen('subject')">查看题目</a-button>
      </div>
      </a-col>
      </a-row>
      </div>
      </div>
      </template>
      <script>
      export default {
      name: "page",
      data() {
      return {
      title: '尚捷科技'
      }
      },
      created() {
      },
      mounted() {
      },
      methods: {
      /**
      * 页面切换
      */
      goOpen(url) {
      if (url) {
      this.$router.push({path: "/" + url})
      } else {
      this.$router.replace('/')
      }
      }
      },
      }
      </script>
      <style scoped>
      #center {
      width: 100%;
      text-align: center;
      }
      </style>
      src/web/open/md/explain.md 0 → 100644
      浏览文件 @ 0d7b2f5f
      # 前端技术选型
      #### 工具
      编译器 VScode HBuilderX Idea
      核心包 node-v14.17.1-x64
      #### 基础知识
      [html](https://www.runoob.com/html/html-tutorial.html)
      [css](https://www.runoob.com/css/css-tutorial.html)
      [javascript](https://www.runoob.com/js/js-tutorial.html)
      #### 进阶1 基础组件
      基础框架 [vuejs](https://cn.vuejs.org/)
      数据请求 Axios
      模拟数据 MockJS
      打包工具 webpack
      基础语法 ES6
      环境 nodejs
      接口 *RESTFUL API* 标准
      #### 进阶2 PC的快速开发
      样式框架 [ant design vue](https://antdv.com/docs/vue/introduce-cn/)
      设计标准 [ant design](https://ant.design/docs/spec/introduce-cn)
      src/web/open/md/structure.md 0 → 100644
      浏览文件 @ 0d7b2f5f
      # 前端Vue项目结构说明
      |-- .eslintrc.js //es规则
      |-- .gitignore //git配置文件，可以按规则忽略文件上传
      |-- .project
      |-- babel.config.js //babel配置文件，将新语法向后兼容，为兼容多浏览器
      |-- package-lock.json
      |-- package.json //项目npm安装的依赖文件和部分配置文件
      |-- readme.md //项目说明文件
      |-- vue.config.js //vue3.0 主要配置文件
      |-- public //开发的静态文件
      | |-- favicon.ico
      | |-- index.html
      | |-- static
      | |-- logo.png
      | |-- css
      | | |-- index.css
      |-- src
      | |-- App.vue //主文件， 路由页面一般在此定义，管理系统会在本页引入头部，菜单等一些全局组件
      | |-- main.js //主配置文件，对项目的一些依赖或其他配置的引入
      | |-- api
      | | |-- axios.js //封装的请求工具
      | | |-- index.js //全部的接口地址，会在全局引入 import {方法名} from '@/api' 即可
      | |-- components //组件
      | | |-- base
      | | | |-- header-menu.vue //头部菜单组件
      | | | |-- header.vue //头部组件
      | | |-- markdown //富文本组件
      | | |-- index.vue
      | |-- mock //模拟数据
      | | |-- index.js
      | | |-- open
      | | |-- openMock.js //mock主配置测试
      | |-- router //路由
      | | |-- index.js //路由主配置文件，在这里会引入每个模块的路由文件
      | | |-- open
      | | |-- openRouter.js
      | |-- store
      | | |-- index.js //vuex状态主配置文件，在这里会引入每个状态分类的文件
      | | |-- modules
      | | |-- basedata.js
      | |-- utils
      | |-- web //模块
      | |-- dev //上级开发模块
      | | |-- result.vue //题目结果提交页面
      | |-- open
      | |-- appstore.vue
      | |-- explain.vue
      | |-- index.vue
      | |-- page404.vue
      | |-- structure.vue
      | |-- subject.vue
      | |-- md
      | |-- explain.md
      | |-- subject.md
      |-- static
      |-- logo.png
      \ No newline at end of file
      src/web/open/md/subject.md 0 → 100644
      浏览文件 @ 0d7b2f5f
      # 前端题目
      说明:使用[ant design vue](https://antdv.com/docs/vue/introduce-cn/)的[table](https://antdv.com/components/table-cn/)实现表格的以下功能(实现功能即可)：
      | # |操作|颜色/尺码| X | L |
      | --- |---|---| --- |--- |
      | 1 | + -|白色 | 20 | 30|
      ### 1.合并行
      实现表格的动态行与操作
      ![add.gif](https://sjkjgz.oss-cn-shenzhen.aliyuncs.com/interview/row.gif)
      ### 2.合并列
      实现表格的动态列与操作
      ![add.gif](https://sjkjgz.oss-cn-shenzhen.aliyuncs.com/interview/col.gif)
      ### 3.行列汇总
      实现表格的行列汇总计算
      ![add.gif](https://sjkjgz.oss-cn-shenzhen.aliyuncs.com/interview/total.gif)
      \ No newline at end of file
      src/web/open/page404.vue 0 → 100644
      浏览文件 @ 0d7b2f5f
      <template>
      <a-result status="404" title="404" subTitle="非常抱歉,您所访问的页面不存在">
      <template v-slot:extra>
      <a-button type="primary" @click="backIndex">返回主页</a-button>
      </template>
      </a-result>
      </template>
      <script>
      export default {
      name: "page404",
      data() {
      return {}
      },
      created() {
      },
      mounted() {
      },
      methods: {
      backIndex(){
      this.$router.push({path:"/"})
      }
      },
      computed: {
      }
      }
      </script>
      src/web/open/structure.vue 0 → 100644
      浏览文件 @ 0d7b2f5f
      <template>
      <div>
      <a-row :gutter="50" style="max-width: 1200px;margin: 0 auto;">
      <a-col :xs="24" :sm="24">
      <markdown :source="structure" highlight/>
      </a-col>
      </a-row>
      </div>
      </template>
      <script>
      import structure from './md/structure.md'
      export default {
      name: "structure",
      data() {
      return {
      structure
      }
      },
      created() {
      },
      mounted() {
      },
      methods: {
      },
      }
      </script>
      <style scoped>
      #center{
      width: 100%;
      text-align: center;
      }
      </style>
      src/web/open/subject.vue 0 → 100644
      浏览文件 @ 0d7b2f5f
      <template>
      <div>
      <a-row :gutter="50" style="max-width: 1200px;margin: 0 auto;">
      <a-col :xs="24" :sm="24">
      <markdown :source="doc" highlight/>
      </a-col>
      </a-row>
      </div>
      </template>
      <script>
      //题目
      import doc from './md/subject.md'
      export default {
      name: "home",
      data() {
      return {
      doc
      }
      },
      created() {
      },
      mounted() {
      },
      methods: {
      /**
      * 页面切换
      */
      goOpen(url) {
      if (url) {
      this.$router.push({path: "/" + url})
      } else {
      this.$router.replace('/')
      }
      }
      },
      }
      </script>
      <style scoped>
      .center{
      width: 100%;
      }
      .logo {
      height: 80px;
      width: 80px;
      }
      .text-area {
      display: flex;
      justify-content: center;
      }
      .title {
      font-size: 20px;
      color: black;
      }
      </style>
      vue.config.js 0 → 100644
      浏览文件 @ 0d7b2f5f
      const path = require('path')
      const packageName = require('./package.json').name;
      //路径转换方法
      function resolve(dir) {
      return path.join(__dirname, dir)
      }
      const CompressionPlugin = require('compression-webpack-plugin') // compression-webpack-plugin插件需要npm安装
      const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
      const IS_PROD = process.env.NODE_ENV === 'production'; // 是否为生产环境(打包/build后)
      const api= 'www.saas123.com';
      const SJCDN = {
      css: [
      'http://'+api+'/cdnjs/antd.min.css',
      'http://saas123.com/cdnjs/github-markdown.css',
      ],
      js: [
      'http://'+api+'/cdnjs/vue.min.js',
      'http://'+api+'/cdnjs/axios.min.js',
      'http://'+api+'/cdnjs/vuex.min.js',
      'http://'+api+'/cdnjs/vue-router.min.js',
      'http://'+api+'/cdnjs/vue-i18n.min.js',
      'http://'+api+'/cdnjs/moment-with-locales.min.js',
      'http://'+api+'/cdnjs/antd-with-locales.min.js',
      'http://'+api+'/cdnjs/marked.min.js',
      //'http://'+api+'/cdnjs/highlight.min.js',
      ],
      }
      module.exports = {
      publicPath: IS_PROD ? '/' : '/', // 公共路径
      outputDir: 'dist', // 'dist', 生产环境构建文件的目录
      assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
      indexPath: 'index.html', // 相对于打包路径index.html的路径
      filenameHashing: true, //文件名中包含了 hash 以便更好的控制缓
      lintOnSave: !IS_PROD, // 设置eslint报错时停止代码编译
      runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
      productionSourceMap: !IS_PROD, // 不需要生产环境的 source map（减小dist文件大小，加速构建）
      integrity: true, //如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性
      pwa: {}, // 向 PWA 插件传递选项。
      parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
      devServer: { //开发服务
      host: '0.0.0.0', // 匹配本机IP地址(默认是0.0.0.0)
      port: 8090, // 开发运行端口号
      open: true, // npm run serve后自动打开页面
      hotOnly: true, // 热更新
      disableHostCheck: true, //取消头部域名的检测
      overlay: { // 让浏览器 overlay 同时显示警告和错误
      warnings: false,
      errors: false
      },
      headers: {
      'Access-Control-Allow-Origin': '*',
      },
      },
      chainWebpack: config => {
      // 第1个参数：别名，第2个参数：路径（设置路径别名）
      config.resolve.alias
      .set('@', resolve('src'))
      // 生产环境注入cdn
      config.plugin('html')
      .tap(args => {
      args[0].cdn = SJCDN;
      return args;
      });
      config.module
      .rule('md')
      .test(/\.md$/)
      .use('text-loader')
      .loader('text-loader')
      .end();
      if (IS_PROD) {
      // 移除 prefetch 插件(针对生产环境首屏请求数进行优化)
      config.plugins.delete('prefetch')
      // 移除 preload 插件(针对生产环境首屏请求数进行优化)
      config.plugins.delete('preload')
      // 压缩代码
      config.optimization.minimize(true);
      // 分割代码
      config.optimization.splitChunks({
      chunks: 'all'
      })
      //打包分析, 打包之后自动生成一个名叫report.html文件(可忽视)
      // config.plugin("webpack-report").use(BundleAnalyzerPlugin, [{
      // analyzerMode: "static"
      // }]);
      }
      },
      // 配置打包 js、css文件为.gz格式，优化加载速度
      configureWebpack: config => {
      // 把子应用打包成 umd 库格式 packageName改成跟主应用中name注册的一致
      config.output.library = `${packageName}-[name]`
      config.output.libraryTarget = 'umd'
      config.output.jsonpFunction = `webpackJsonp_${packageName}`
      //用cdn方式引入,前面是项目内引入的，后面是挂载到window对象下的
      config.externals = {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios'
      }
      if (IS_PROD) {
      // 为生产环境修改配置...
      config.plugins.push(
      //生产环境自动删除console
      new UglifyJsPlugin({
      uglifyOptions: {
      compress: {
      drop_console: true,
      drop_debugger: false,
      pure_funcs: ["console.log"] //移除console
      },
      },
      sourceMap: false,
      parallel: true,
      })
      );
      config.plugins.push(
      new CompressionPlugin({
      test: /\.js$|\.css/, // 匹配文件
      threshold: 10240, // 超过10kB的数据进行压缩
      deleteOriginalAssets: false // 是否删除原文件 （原文件也建议发布到服务器以支持不兼容gzip的浏览器）
      })
      )
      }
      },
      css: {
      // 是否使用css分离插件 ExtractTextPlugin
      // extract: false,
      // 开启 CSS source maps?
      sourceMap: false,
      // css预设器配置项
      loaderOptions: {},
      // 启用 CSS modules for all css / pre-processor files.
      requireModuleExtension: false,
      },
      }
      Markdown 格式
      0% 或
      您添加了 0 人 到此讨论。请谨慎行事。
      请先完成此评论的编辑！
      请 注册 或者 后发表评论