Fork me on GitHub

vue 拓展

字数统计: 1.6k字   |   阅读时长≈ 7分

Vue 移动端框架

https://www.jianshu.com/p/1e05c8d68407

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
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。国外无中文文档

移动端h5开发app框架常用

​ 移动端h5开发app框架的主要原理是通过内嵌webview容器，将自己的H5页面呈现给用户。其中webview是指原生APP中的一个组件，它类似于Android中的WebView或iOS中的UIWebView组件，可以让我们在应用中显示web内容。这样，我们就可以利用H5技术开发出一套网页程序，经过封装之后嵌入到这个web容器中，然后利用javascript和native代码之间的交互机制来实现原生APP与H5之间的通信和交互。

Ionic框架

​ Ionic框架是基于AngularJS（一种Web应用框架）和Cordova（一种用于原生应用交互的插件框架）开发的，它采用了一系列的CSS组件及JavaScript插件，提供了一种基于HTML、CSS和JavaScript的开发模式，让开发者可以使用HTML、CSS、TypeScript等Web技术，简单而快速地开发出高质量的移动应用。

React Native框架

​ React Native框架是由Facebook开发的移动端H5开发框架，其特点是采用了ReactJS的技术，但是在React Native中，采用的是原生组件，所以其性能和效果可以与原生应用媲美。同时，React Native还提供了用于原生组件与JavaScript代码之间的通信机制，使得React Native可以轻松地应对复杂的原生UI和动画效果。

PhoneGap框架

​ PhoneGap是由Apache Cordova项目衍生而来的移动端H5开发框架，主要特点是可以将HTML、CSS和JavaScript等Web技术封装为APP，并且可以与原生应用进行交互。PhoneGap还提供了一些插件，用于增强应用的功能，例如加入地图或相机功能等。

Weex框架

​ Weex框架是阿里巴巴推出的一种移动端H5开发框架，它提供了一种基于Vue.js编写的开发方式，支持与原生应用的交互，并且可以将H5应用app中做h5页面的缓存优化打包成APP或者放入Webview中运行。

uniapp

​

vue 多页面 history 路由 配置

多页面打包配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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",
    },
},

testPMS页面路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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");

index 页面路由

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
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",
});

nginx 配置资源路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
 }
}

vue 多页面 history 路由 + publicPath 配置

多页面打包配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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",
    },
},

testPMS页面路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const router = new VueRouter({
  base: "/jysp/testPMS",
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/repairSchedule",
    },
    {
      path: "/repairSchedule",
      name: "xxxx",
      component: IframeView,
    },
 ]
})

index 页面路由

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
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",
});

nginx 配置资源路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
 }
}

注意：服务器的根路径 /home/jysp/workspace/pms3，我们配置了 /jysp/。所以我们需要在 在 pms3 下新增 /pms3/jysp 文件夹，然后将 打包文件放到jysp下

部署项目时避免上次缓存

在nginx 指定资源类型不缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
    listen       18004;
    server_name  192.168.1.12;
    access_log logs/pmsWeb.access.log main;
    location / {
        #对html设置不缓存
        if ($request_filename ~* .*\.(?:html|htm)$)
        {
        	add_header Cache-Control "no-cache,no-store,must-revalidate";
        }
        root /home/jysp/workspace/pmsweb/;
            index index.html index.htm;
        }
}

Pure Admin

github star 15K+

在线演示 gitee

点我查看预览 github

基于Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss等最新技术栈开发

ruoyi

RuoYi-Vue 全新 Pro 版本，优化重构所有功能。基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 微信小程序，支持 RBAC 动态权限、数据权限、SaaS 多租户、Flowable 工作流、三方登录、支付、短信、商城、CRM、ERP 等功能。你的 ⭐️ Star ⭐️，是作者生发的动力！

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。