【含转】m1 安装开发问题（Homebrew安装 + vue3.0 开发）

最新推荐文章于 2024-07-13 15:55:31 发布

Luster-lyl

最新推荐文章于 2024-07-13 15:55:31 发布

阅读量883

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/kiwuq_/article/details/115183428

版权

1、MacOs M1安装Homebrew 在国内最简单方法（转）

m1安装：

/bin/zsh -c "$(curl -fsSL https://gitee.com/huwei1024/HomebrewCN/raw/master/Homebrew.sh)"

2、Vue安装

// vue 3.0（vue/cli）

vue create demo-name

// vue 2.0（vue-cli）

vue init webpack demo-name

3、vue开发问题

vue component 引入：

// app.vue

<template>
  <div id="app">
    <Home></Home>
  </div>
</template>

<script>
import Home from './views/Home'
export default {
  components:{
    Home
  }
}
</script>

vue router :

（1）router-view的应用：

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

组件引入问题（学习与思考）

（1）组件的注册方式：

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

new Vue({ el: '#components-demo' })  //vue2.x里面的知识

（question：目前还不知道2.0和3.0组件注册的用法区别，再梳理梳理叭）

（梳理完啦，主要是vue不能引入的问题，需要采用createApp({...}).component('my-component-name', {})，详情见此小节（3）点）

（2）2.0和3.0的梳理

①vue 2.0

❶组件名：

<my-component-name> 和 <MyComponentName> 都是可接受的。

kebab-case (短横线分隔命名)

PascalCase (首字母大写命名)

注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

❷全局注册

到目前为止，我们只用过 Vue.component 来创建组件：

Vue.component('my-component-name', {
  // ... 选项 ...
})

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：

//js

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })


//html

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

❸局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

// js

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

// 或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

// 注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

// 1.用在模板中的自定义元素的名称
// 2.包含了这个组件选项的变量名

②vue 3.0

❶ 组件名

my-component-name

全部小写
包含连字符（即，多个单词与连字符相连）

<my-component-name>和<MyComponentName>都是可以接受的。但是请注意，只有kebab-case名称直接在DOM中有效（即非字符串模板）。

❷全局注册

//js 

Vue.createApp({...}).component('my-component-name', {
  // ... options ...
})

// 这些组件已在该应用程序中全局注册。这意味着它们可以在此应用程序内的任何组件实例的模板中使用：

const app = Vue.createApp({})

app.component('component-a', {
  /* ... */
})
app.component('component-b', {
  /* ... */
})
app.component('component-c', {
  /* ... */
})

app.mount('#app')

// html

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

这甚至适用于所有子组件，这意味着这三个组件中的所有三个也将在彼此内部可用。

❸ 局部注册

局部注册的组件在子组件中也不可用

具体同 2.0

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
  // ...
}

（3）Vue3项目注册全局组件时使用Vue时报错"export 'default' (imported as 'Vue') was not found in 'vue'（转）

原因：vue3中没有全局的vue

解决方法：使用createApp

//引入createApp
import { createApp } from 'vue'
//引入需要添加的组件
import Icon from "@/components/Icon.vue";
//添加组件
createApp().component('Icon', Icon)

//如果在main.js中

createApp(App).use(store).use(router).component('Icon', Icon).mount('#app')