Vue3渐进式增强，运用CDN在项目中引入Vue3，超简单

肥宝欣

已于 2024-09-27 17:52:52 修改

阅读量7.4k

点赞数 41

文章标签： vue.js 前端 javascript

于 2024-02-06 17:44:08 首次发布

本文链接：https://blog.csdn.net/m0_46313004/article/details/136039106

版权

一、目的

1.1 发现当不使用构建方式的情况下（因为项目小没必要）引入Vue3，官方文档并没有给出很详细的使用思路，对于踩到的坑，就简单记录一下。
1.2 本文主要是使用CDN引入的，记录基本步骤和注意事项
1.3 尝试本地引入，但可能由于后端是flask的原因，我没有跑通，有会的请教教我。

二、使用到的资源

2.1 Vue3 => 3.3.4
2.2 elementPlus => 2.3.12
2.3 axios => 1.5.0
2.4 flask => 求其不打紧

三、总体思路

 选择合适的cdn引入  =>  
 定义根组件并挂载    =>  
 定义子组件并注册    =>  
 父、子组件间参数的传递    =>  
 通过axios发送数据到后端处理

四、Vue3

4.1导入Vue3

4.1.1选择CDN：

// 在html的<head>内引入，好似下面这样，我这边使用了bootcdn链接: [link](https://https://www.bootcdn.cn/all/)的，因为比较顺眼，主要官网中提供的CDN很容易挂

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>

4.1.2 CDN版本选择：
注意：我们打开bootcdn网站，发现会有很多版本的，例如vue.global.prod.js、vue.esm-browser.min.js等。注意几个关键词，其中global是指提供一个全局的Vue属性、esm-browser是可以使用

4.1.3导入CDN方式：
本次项目主要介绍vue.global.prod.js、vue.esm-browser.prod.js使用上的区别的区别。

 4.1.3.1    vue.global.prod.js    =>  在head中使用 <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>引入后，在后续根组件和子组件中可以通过全局的Vue,来引入对应ref、createApp等方法，如下：

const app = Vue.createApp({
/* 根组件选项 */
   },

 4.1.3.2    vue.esm-browser.prod.js    =>  可以在页面<script type="module"></script>内使用导入，如下：

//第1步：需要什么就引入什么
import { createApp,ref } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.prod.js'
//第2步：不需要写Vue.了
const app = createApp({
/* 根组件选项 */
   },

本文使用vue.global.prod.js方式，没那么简洁，但方便

4.1.4注意事项：

4.2根组件建立并挂载

4.2.1基本的步骤：，在script type="module"内完成如下代码就完成根组件创建：

//1、创建根组件
const app = Vue.createApp({
/* 根组件选项 */
   },
//2、挂载插件ElementPlus
app.use(ElementPlus)
//3、挂载根组件
app.mount('#app')
// 4、处理错误
app.config.errorHandler = (err) => {
/* 处理错误 */
console.log("出现错误：")
console.error(err)
}

4.2.2根组件选项：根组件内可以定义一些参数、方法之类:

// 根组件选项
   components: {
      landMain
   },
   setup(){
      // 定义一个message
      const message = Vue.ref('确认')
      return {
         message
      }
   },

4.2.2html内编写代码：然后所有根组件定义的代码都可以作用在div id="app"内了。

<div id="app">

</div>

4.3js子组件建立并在根组件注册

和构建可以使用.vue组件不同，cdn引入只能使用js组件
4.3.1使用js子组件步骤
第1步：定义js子组件，js子组件以单独文件的形式。

//1、在static/js内定义landMain文件，相对路径../static/js/landMain.js
export default {
    name : "landMain",
    components: {
     },
    setup(){
        // 测试可删
        const landvalue = Vue.ref('土地信息')
        return {
            landvalue
        }
     },
    methods:{
    },
    mounted() {
    },
    template:`
         {{ landvalue }}
         <el-divider content-position="center">选择行政区</el-divider>             
    </el-main>
       `
  }

第2步：通过import形式在根组件所在代码块内引入。

import landMain from '../static/js/landMain.js'

第3步：通过根组件选项中的components: {} 注册子组件。

const app = Vue.createApp({
   /* 根组件选项 */
   components: {
      landMain
   },
},

第4步：在 id="app"内使用子组件：

<!-- 根组件 -->
<div id="app">
    <land-main> </land-main>
</div>

4.3.2注意事项

4.3.2.1:驼峰规则
注意上述4.3.1中的第4步写的是land-main，而不是landMain，要注意。
4.3.2.2:template问题
template内使用的是模版字符串：``，不是"",也不是’'。
4.3.2.3:style问题
注意不能在js组件中template内定义style,也没有单独的 style选项用来定义CSS，目前我看只能用最传统的方式：

<link rel=stylesheet href="../static/css/component6011.css" type="text/css"/>
有别的办法的请教教我

4.4全局组件

// 注册全局组件
//注册之后就可以在id="app"的任意地方使用了，但最后尽量避免，因为会造成父子关系不明确
 app
    .component('landMain',landMain)  //按钮
    .component('component601',component601)  //联级选择器
    .component('component602',component602)  //单选框
    .component('component603',component603)  //选择器
    .component('component605',component605)  //日期选择器

4.5组件通讯

4.5.1子组件 => 父组件（参数传递）
建议使用ref
第1步，先在父组件定义一个参数，例如childRef：

setup(){
      // 子组件传递参数给父组件
      const childRef = Vue.ref()
      return {
         childRef
      }
   },

第2步，在html元素内，定义ref,注意：必须与上述参数名称一致

<!-- 根组件 -->
<div id="app">
    <land-main ref="childRef"> </land-main>
</div>

第3步，就可以测试取值是否成功了。

//取得landMain子组件下在setup中定义的属性值landvalue
console.log(`这个mounted实例的属性：${this.childRef.landvalue}`)

4.5.2父组件 => 子组件（参数传递）
建议使用provide、inject
第1步在父组件中provide

  setup(){
      // 测试代码，可删
      const message = Vue.ref('确认')
      return {
         message
      }
   },
   provide() {
      // 测试代码，测试父组件传递参数给子组件，inject => child.js,可删
      //注意提供的参数要先computed一下，不然不会动态响应
      return {
         ParMessage: Vue.computed(() => this.message)
      }
   },

第2步在子组件中inject:

    setup(){
        const ParMessage = Vue.inject('ParMessage')
        return {
            ParMessage
        }
     },

五、elementPlus

第1步在head中通过CDN方式引入：

 可以参考官方文档，不介绍了

第2步在根组件中使用app.use(ElementPlus)，就能在所有地方使用app.use(ElementPlus)了

六、结尾

到时更新