Vue脚手架

3. Vue脚手架

3.1 安装脚手架

切换淘宝镜像

npm config set registry https://registry.npm.taobao.org

安装命令

npm install -g @vue/cli

3.2 render函数

3.3 修改默认设置

3.4 ref属性

1. 被用于给元素或子组件注册引用信息 (id 代替者)

2. 应用在 html 标签上获取的是真实的 DOM 元素，应用在组件标签上是组件实例对象 (vc)

   1. 使用方式:

   打标识：

   ...

   或

   获取：this.$refs.xxx

3.5 props配置

3.6 mixin混入

功能：可以把多个组件共用的配置提取成一个混入对象

使用方式：

1. 定义混合

   {
       data(){...},
       methods:{...},
       ...
   }
   

2. 使用混合

   1. 全局混合：Vue.mixin(xxx)
   2. 局部混合：mixins:['xxx']

3.7 plugins

3.8 scoped样式

作用：让样式在局部生效，防止冲突

写法：

src/MyHeader.vue

src/MyList.vue

src/MyItem.vue

src/MyFooter.vue