使用 Vue3 开发项目[不用Node,实现浏览器访问]

使用 vue3 vue3-sfc-loader 实现《不适用 node 完成 vue 项目开发浏览器访问》vue3-sfc-loadergithub 地址资源vue3-sfc-loader https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.jsvue3 https://unpkg.com/vue@nextvue-

菜鸟阿达

4075人浏览 · 2021-04-12 16:28:03

菜鸟阿达 · 2021-04-12 16:28:03 发布

使用 vue3 vue3-sfc-loader 实现《不适用 node 完成 vue 项目开发浏览器访问》

vue3-sfc-loader

github 地址

资源

vue3-sfc-loader https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js
vue3 https://unpkg.com/vue@next
vue-router https://unpkg.com/vue-router@4.0.10/dist/vue-router.global.js

code 示例

demo1 实现 vue 文件的访问

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v3_浮生若梦</title>
</head>
<body>
<div id="app" class="full_screen">
    <layout></layout>
</div>
</body>
<script src="./static/vue.global.js"></script>
<script src="./static/vue3-sfc-loader.js"></script>
<script src="./static/vue-router.js"></script>
<script type="module" src="index.js"></script>
</html>

index.js

;(async () => {
    const options = {
        moduleCache: {vue: Vue},
        getFile(url) {
            return fetch(url).then(res => {
                if (!res.ok) throw Object.assign(new Error(url + ' ' + res.statusText), {res});
                return res.text();
            })
        },
        addStyle(textContent) {
            document.head.insertBefore(
                Object.assign(document.createElement('style'), {textContent}),
                document.head.getElementsByTagName('style')[0] || null);
        },
    };
    const {loadModule} = window['vue3-sfc-loader'];
    const loadVue = (vuePath) => loadModule(vuePath, options);
    const loadVueFile = (vuePath) => () => loadVue(vuePath);
    let routes = [
        /*首页*/
        {path: '/', component: loadVueFile('./index.vue')},
    ]
    const args = {name: 'app', components: {'layout': await loadVue('./layout.vue')}};
    const app = Vue.createApp(args)
    app.use(VueRouter.createRouter({history: VueRouter.createWebHashHistory(), routes: routes}))
    app.mount("#app")
})().catch(ex => console.error(ex));

layout.vue

<template>
  <div class="full_screen">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: "layout",
  components: {},
  data() {
    return {}
  },
  created() {

  },
  methods: {}
}
</script>

index.vue

<template>
  <div>
    {{userName}}: 你好 vue3
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      userName: "张三"
    }
  },
  created() {
  },
  methods: {}
}
</script>

展示

demo2 实现模板文件的引入

新建 vue component 文件 addressComponent.vue [假设一个地址选择组件]

<template>
  <div>
    地址选择组件: {{province}}:{{city}}:{{area}}
  </div>
</template>

<script>
export default {
  name: "addressComponent",
  components: {},
  data() {
    return {
      province: "北京",
      city: "北京市",
      area: "昌平区"
    }
  },
  created() {
  },
  methods: {}
}
</script>

在index.vue 文件中引入 address.vue 组件

<template>
  <div>
    <div>
      {{userName}}: 你好 vue3
    </div>
    <div>
      <addressComponent></addressComponent>
    </div>
  </div>
</template>

<script>
// 必须添加 .vue 后缀
import addressComponent from "./addressComponent.vue"

export default {
  name: "index",
  components: {addressComponent},
  data() {
    return {
      userName: "张三"
    }
  },
  created() {
  },
  methods: {}
}
</script>

展示

demo3 vue 文件导入 js 文件

js 文件导入有两种方式
导入js文件
js 文件修改为 mjs

导入 xxxxx.mjs, 新建 help.mjs

export const help = {
    k: 1,
    v: 2
}

在index.vue 文件中导入 help.mjs

<template>
  <div>
    <div>
      {{userName}}: 你好 vue3
    </div>
    <div>
      <addressComponent></addressComponent>
    </div>
    <div>{{help}}</div>
  </div>
</template>

<script>
// import mjs
import {help} from './help.mjs'
// 必须添加 .vue 后缀
import addressComponent from "./addressComponent.vue"

export default {
  name: "index",
  components: {addressComponent},
  data() {
    return {
      userName: "张三",
      help,
    }
  },
  created() {
    console.log(help)
  },
  methods: {}
}
</script>

展示
导入 js 文件 help2.js

访问页面会出现如下异常

SyntaxError: 'import' and 'export' may appear only with 'sourceType: "module"' (1:0)
    at De._raise (vue3-sfc-loader.js:19)
    at De.raiseWithData (vue3-sfc-loader.js:19)
    at De.assertModuleNodeAllowed (vue3-sfc-loader.js:19)
    at De.parseStatementContent (vue3-sfc-loader.js:19)
    at De.parseStatement (vue3-sfc-loader.js:19)
    at De.parseBlockOrModuleBlockBody (vue3-sfc-loader.js:19)
    at De.parseBlockBody (vue3-sfc-loader.js:19)
    at De.parseProgram (vue3-sfc-loader.js:19)
    at De.parseTopLevel (vue3-sfc-loader.js:19)
    at De.parse (vue3-sfc-loader.js:19)

解决办法修改index.js

;(async () => {
    const options = {
        moduleCache: {vue: Vue},
        getFile(url) {
            return fetch(url).then(res => {
                if (!res.ok) throw Object.assign(new Error(url + ' ' + res.statusText), {res});
                // ----------------------
                return res.text().then(content => {
                    if (/.*?\.js$/.test(url)) {
                        return {content: content, type: ".mjs"}
                    }
                    return content;
                });
            })
        },
        addStyle(textContent) {
            document.head.insertBefore(
                Object.assign(document.createElement('style'), {textContent}),
                document.head.getElementsByTagName('style')[0] || null);
        },
    };
    const {loadModule} = window['vue3-sfc-loader'];
    const loadVue = (vuePath) => loadModule(vuePath, options);
    const loadVueFile = (vuePath) => () => loadVue(vuePath);
    let routes = [
        /*首页*/
        {path: '/', component: loadVueFile('./index.vue')},
    ]
    const args = {name: 'app', components: {'layout': await loadVue('./layout.vue')}};
    const app = Vue.createApp(args)
    app.use(VueRouter.createRouter({history: VueRouter.createWebHashHistory(), routes: routes}))
    app.mount("#app")
})().catch(ex => console.error(ex));

展示

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^