vue3实践

创建项目

npm init vue@latest

使用unocss

npm i -D unocss 

// vite.config.js
// 引入Unocss
import Unocss from 'unocss/vite';
import {presetUno, presetAttributify, presetIcons} from 'unocss'

export default defineConfig({
    plugins: [
        Unocss({ // 使用Unocss
            presets: [
                presetUno(),
                presetAttributify(),
                presetIcons()],
        })
    ]
})

// main.js
import 'uno.css'

// vue 使用
<button class="w-200px bg-#212175 
               color-#fff p-10px 
               rd-4px b-0 b-h m-20px">删除</button>

使用环境变量

// .env.development
// .env.production
# 朝和食品管理系统/开发环境
VITE_APP_BASE_API = '/dev-api'

// .vue
console.log( import.meta.env.VITE_APP_BASE_API )

开启代理&自动打开浏览器

// vite.config.js
export default defineConfig({
    server: {
        port: 80,
        open: true,
        proxy: {
            // https://cn.vitejs.dev/config/#server-proxy
            '/dev-api': {
                target: 'http://localhost:8505/api/',
                changeOrigin: true,
                rewrite: (p) => p.replace(/^/dev-api/, '')
            }
        }
    }
}) 

自动import

• 手动import

import { ref } from 'vue'
import {useRouter} from 'vue-router'

const count = ref(6)

const router = useRouter()
function go_to_list(){
    router.push({
        name: 'List'
    })
}

• 自动import

// T
npm i -D unplugin-auto-import

// vite.config.js
export default defineConfig({
    plugins: [
        AutoImport({
            imports: [
                'vue',
                'vue-router',
                'pinia'
            ],
            dts: false,
        })
   ]
})

// .vue

// import { ref } from 'vue'
// import {useRouter} from 'vue-router'

const count = ref(6)

const router = useRouter()
function go_to_list(){
    router.push({
        name: 'List'
    })
}

部署

server {
        listen       443 ssl;
        server_name  www.demo.com;

        ssl_certificate      www.demo.com_bundle.crt;
        ssl_certificate_key  www.demo.com.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
	
	location / {
            # 配置页面不缓存html和htm结尾的文件
            if ($request_filename ~* .*\.(?:htm|html)$) {
                add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
            }
            root   html/demo;
	    try_files $uri $uri/ /index.html;
	    index  index.html index.htm;
        }

	location /prod-api {
            # rewrite ^/dev-api/(.*)$ /$1 break;
            include uwsgi_params;
            proxy_set_header   Host             $host;
            proxy_set_header   x-forwarded-for  $remote_addr;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_pass  http://localhost:8505/api/;
	}
}
	
# http跳转https
server {
        listen 80;
        server_name www.demo.com;
        return 301 https://$http_host$request_uri;
}

element-plus

整理的很棒 哎呀妈呀，示例代码都默认使用ts写的，我还不会呢，不太喜欢强类型语言太操心，卷吧卷吧

ts

element-plus-vite-starter ts

在线预览