npm init vite@latest

// purge: [], purge在3.0 更改为 content
{
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    ...
}
    
// 最新
module.exports = {
  // purge: [], purge在3.0 更改为 content tailwind 应用范围
  content: [
    './index.html', 
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      height: {
        header: '72px',
        main: 'calc(100vh - 72px)'
      },
      fontSize: {
        xs: ['0.25rem', '0.35rem'],
        sm: ['0.35rem', '0.45rem'],
        base: ['0.42rem', '0.52rem'],
        lg: ['0.55rem', '0.65rem'],
        xl: ['0.65rem', '0.75rem']
      },
      boxShadow: {
        'l-white': '-10px 0 10px white',
        'l-zinc': '-10px 0 10px #18181b'
      },
      colors: {
        main: '#f44c58',
        'hover-main': '#f32836',
        'success-100': '#F2F9EC',
        'success-200': '#E4F2DB',
        'success-300': '#7EC050',
        'warn-100': '#FCF6ED',
        'warn-200': '#F8ECDA',
        'warn-300': '#DCA550',
        'error-100': '#ED7456',
        'error-200': '#f3471c',
        'error-300': '#ffffff'
      },
      backdropBlur: {
        '4xl': '240px'
      },
      variants: {
        scrollbar: ['dark']
      }
    },
  },
  plugins: [],
}

import '@/styles/index.scss'

yarn add sass@1.54.4 -D

Vue 移动端框架Vue 

移动端框架
1. Vant # vue3
2. Mint UI #vue2
3. weUI  #微信风格
4. Frozen UI #qq风格
5. MUI


移动端app
1、Taro 
2、uniapp
3、react-native
4、fluter
5、ionic-framework

PC端
1、element-plus 23.3k star
	熟悉的vue2 element 风格
2、naive-ui 15.3k star
	Naive UI是一个仅支持vue3的库，有超过80个组件，希望能帮你少写点代码。
该库曾得到了vue作者犹大的极力推荐，属于新生代的ui组件库。官方提供主题编辑器，不用繁琐的less、sass、css变量，也不用webpack的loaders。使用的是由TypeScript构建的先进类型安全主题系统，运行快、小巧轻量、专门针对样式优化，不需要导入任何css就能让组件正常工作。
3、ant-design-vue 19.7k star
	相比于element plus，Ant Design在组件方面有着非常大的优势，不过使用稍微复杂了点，但是换来更大的便利。
4、Quasar
Quasar UI是一个不被大众熟知的框架，目前github已有25.3k star。国外无中文文档

pages: {
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html",
      title: "PMS index",
    },
    testPMS: {
      entry: "src/testPMS.js",
      template: "public/testPMS.html",
      filename: "testPMS.html",
      title: "PMS test",
    },
},

const router = new VueRouter({
  base: "/testPMS",
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/repairSchedule",
    },
    {
      path: "/repairSchedule",
      name: "xxxx",
      component: IframeView,
    },
 ]
})
new Vue({
  router,
  render: (h) => h(TestPMS),
}).$mount("#testPMS");

const router = new VueRouter({
  routes: [
    {
      path: "/",
      redirect: "/repairSchedule",
      meta: {
        keepAlive: false,
        sort: false,
      },
    },
      {
      path: "/login",
      name: "login",
      meta: {
        keepAlive: false,
        transitionName: "opacity-scale",
      },
      component: () =>
        import(/* webpackChunkName: "login" */ "@/views/login/index.vue"),
    },
    {
      path: "/404",
      name: "error-404",
      meta: {
        keepAlive: false,
        sort: "z",
      },
      component: () =>
        import(/* webpackChunkName: "error-404" */ "@/views/error/404View.vue"),
    },
    {
      path: "*",
      redirect: "/404",
      meta: {
        keepAlive: false,
        sort: false,
      },
    },
  ],
  base: "/",
  mode: "history",
});

server {
 listen 1973;
 server_name 192.168.1.12;
 location / {
   	root '/home/jysp/workspace/pms3';
   	index index.html;
	try_files $uri $uri/ /index.html;
 }
 location /testPMS {
    root '/home/jysp/workspace/pms3';
    index testPMS.html;
    try_files $uri $uri/ /testPMS.html;
 }
}

pages: {
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html",
      title: "PMS index",
    },
    testPMS: {
      entry: "src/testPMS.js",
      template: "public/testPMS.html",
      filename: "testPMS.html",
      title: "PMS test",
    },
},

const router = new VueRouter({
  base: "/jysp/testPMS",
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/repairSchedule",
    },
    {
      path: "/repairSchedule",
      name: "xxxx",
      component: IframeView,
    },
 ]
})

const router = new VueRouter({
  routes: [
    {
      path: "/",
      redirect: "/repairSchedule",
      meta: {
        keepAlive: false,
        sort: false,
      },
    },
      {
      path: "/login",
      name: "login",
      meta: {
        keepAlive: false,
        transitionName: "opacity-scale",
      },
      component: () =>
        import(/* webpackChunkName: "login" */ "@/views/login/index.vue"),
    },
    {
      path: "/404",
      name: "error-404",
      meta: {
        keepAlive: false,
        sort: "z",
      },
      component: () =>
        import(/* webpackChunkName: "error-404" */ "@/views/error/404View.vue"),
    },
    {
      path: "*",
      redirect: "/404",
      meta: {
        keepAlive: false,
        sort: false,
      },
    },
  ],
  base: "/jysp/",
  mode: "history",
});

server {
 listen 1973;
 server_name 192.168.1.12;
 location /jysp {
   	root '/home/jysp/workspace/pms3';
   	index index.html;
	try_files $uri $uri/ /jysp/index.html;
 }
 location /testPMS {
    root '/home/jysp/workspace/pms3';
    index testPMS.html;
    try_files $uri $uri/ /jysp/testPMS.html;
 }
}

npm i markdown-it -S
npm i react-markdown-editor-lite -S
npm i highlight.js -S

npx create-react-app my-app
cd my-app
npm start

在 JavaScript 中，计数循环就是一种最简单的迭代： 
for (let i = 1; i <= 10; ++i) { 
    console.log(i); 
}

- 迭代之前需要事先知道如何使用数据结构。
	数组中的每一项都只能先通过引用取得数组对象， 然后再通过[]操作符取得特定索引位置上的项。这种情况并不适用于所有数据结构。

- 遍历顺序并不是数据结构固有的。
	通过递增索引来访问数据是特定于数组类型的方式，并不适 用于其他具有隐式顺序的数据结构。


ES5 新增了 Array.prototype.forEach()方法，向通用迭代需求迈进了一步（但仍然不够理想）：

这个方法解决了 单独记录索引 和 通过数组对象取得值 的问题。不过，没有办法标识迭代何时终止。 因此这个方法只适用于数组，而且回调结构也比较笨拙。


可迭代对象iterable的简单for/of循环也可以写成如下这种复杂的形式：

let iterable = [1,2,3,4];
let iterator = iterable[Symbol.iterator](); // 通过iterable的迭代器方法 获取可迭代对象
for(let rs = iterator.next(); !rs.done; rs = iterator.next()) {
    console.log('迭代数值：', rs)
}