Vue学习笔记_Day03

文章目录

• 1，Vue-Cli
• 2，快速搭建
• 3，项目结构
• 4，单文件组件
• 5，使用Less写样式
• 6，组件局部注册
• 7，组件全局注册

1，Vue-Cli

需要安装Node.js

安装Vue-Cli：

npm install -g @vue/cli

创建一个项目：

vue create hello-world

选择Vue2，回车。

进入项目路径，启动项目：

cd hello-world
npm run serve

效果：

打开链接，效果：

2，快速搭建

http://download.csdn.net/download/qq_37284843/89403421

解压到单独文件夹下，运行指令：

npm install
npm run serve

效果：

3，项目结构

main.js。这是Vue项目的核心代码。创建实例的地方。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue。这是入门案例代码。

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      msg:"你好，世界！"
    }
  }
}
</script>

<style scoped>
</style>

4，单文件组件

一个vue文件就是一个组件。
三个部分，分别是HTML，CSS，JS代码。

template部分，需要有唯一的根元素。
不能有多的。

<template>
  <h1>{{ msg }}</h1>
</template>

script部分，通常会导出一个对象。
data要写成函数，其他照旧。

<script>
export default {
  name: 'App',
  data(){
    return {
      msg:"你好，世界！"
    }
  }
}
</script>

style部分，通常加上scoped属性。
让样式只在组件内部生效。

<style scoped>
</style>

5，使用Less写样式

安装依赖：

npm install less less-loader -D

然后就能写less语法了。

<style scoped lang="less">
div{
  h1{
    color:red;
  }
}
</style>

6，组件局部注册

注册：通过components属性注册。
使用：像写HTML标签那样使用。

ABC.vue。这是一个组件。

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "你好，世界！"
    }
  }
}
</script>

App.vue。这是注册和使用的地方。

<template>
  <div>
    <ABC />
    <ABC />
    <ABC />
  </div>
</template>

<script>
import ABC from "./components/ABC.vue"
export default {
  components: { ABC }
}
</script>

7，组件全局注册

注册：通过Vue注册。
使用：像写HTML标签那样使用。

main.js，这是注册的地方。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import ABC from "./components/ABC.vue"
Vue.component("ABC", ABC)

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue，这是使用的地方。

<template>
  <div>
    <ABC />
    <ABC />
    <ABC />
  </div>
</template>