Vue.js：组件化的开发

NPM的使用

介绍

NPM（Node Package Manager）是一个NodeJS包管理和分发工具，其优秀的依赖管理机制和庞大的用户群体，目前已经发展成为整个JS领域的依赖管理工具。 NPM最常见的用法就是用于安装和更新依赖。要使用NPM，首先要安装Node工具。

常用命令

命令（`[ ]` 中的表示可选）	说明
`npm init [-y\|--yes]`	初始化目录，生成 `package.json`，`-y` 和 `--yes` 参数表示所有的选项均选择 yes
`npm install`	安装 `package.json` 中的所有依赖
`npm install --production`	安装 `package.json` 中 `dependencies` 下的依赖
`npm install <package>`	安装指定依赖
`npm install <package> [-g]`	全局安装指定依赖
`npm install <package> [--save-dev]`	安装指定依赖，并将其记录在 `devDependencies` 中
`npm install <package> [--no-save]`	安装指定依赖，依赖不需要记录到 `package.json` 中
`npm uninstall <package>`	移除指定依赖
`npm prune`	移除不在 `package.json` 却在 `node_modules` 中的依赖
`npm update`	升级全部依赖的版本
`npm update <package>`	升级指定依赖的版本
`npm outdated`	查看过期依赖
`npm list <package>`	查看依赖的当前版本
`npm search <string>`	搜索包含关键字的依赖
`npm ls [-g] [--depth=0]`	查看项目中或全部的依赖包，可指定层级为 0
`npm view <package> [field] [--json]`	查看依赖信息，包括历史版本；可指定 `field` 来查看某个键值；可添加 `--json` 参数以 json 格式显示结果
`npm home <package>`	在浏览器端打开依赖的主页
`npm repo <package>`	在浏览器端打开依赖的 GitHub 地址
`npm docs <package>`	查看依赖的文档
`npm bugs <package>`	查看依赖的 bug

Vue CLI

Vue CLI是Vue官方提供的构建工具，通常称为脚手架，用于快速搭建一个带有热重载（在代码修改后不必刷新页面即可呈现修改后的效果）及构建生产版本等功能的单页面应用。

Vue CLI基于webpack构建,也可以通过项目内的配置文件进行配置。

安装：npm install -g @vue/cli（请先安装node）

创建第一个项目

打开终端，输入vue create [项目名]。
出现Vue版本的选择界面：这里选择自定义，回车到下一步。
移动到Linter / Formatter上，按空格去掉勾选，回车到下一步。

这里去掉勾选的是格式检查器，是为了方便开始的学习。

选择3.X，回车到下一步。
选择In package.json，回车到下一步。

package.json是一个管理依赖的文件，类似于build.gradle 。

Save this as a preset for future projects? (y/N)：输入N
当看到如下图所示的提示的时候，说明创建成功。
将文件夹拖入到VS Code即可开始开发。

在VS Code中，在查看->终端中输入npm run serve即可打开热开发环境。

模块化开发

目前前端的开发，主要是通过import来导入不同的模块，例如在刚刚创建的项目的main.js中：

1
2


import { createApp } from 'vue'
import App from './App.vue'

这里从vue中导入了createApp方法和App.vue组件。

组件化开发

组件（Component）是 Vue.js 最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码，允许我们使用小型、独立和通常可复用的组件构建大型应用。

组件的构成

Vue 中规定组件的后缀名是.vue
每个.vue组件都由3部分构成，分别是：
- template：组件的模板结构，可以包含HTML标签及其他的组件。
- script：组件的JavaScript代码。
- style：组件的样式。

组件的使用

观察生成的App.vue文件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

注意到HelloWorld这个标签是自定义的，非html中一部分，这是在下面的script中引入的，后续的export default部分则是完成了组件的注册。

渲染的原理如图

观察另外一个组件代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<template>
    <div>
        <h1>{{title}}</h1>
        <p>{{rating}}</p>
        <button @click="fun">Click Test</button>
    </div>
</template>

<script>
export default {
    name: "Movie",
    props:["title","rating"],
    data(){
        return {
        }
    },
    methods:{
        fun(){
            alert("Clicked!!")
        }
    }
}
</script>

props提供了标签的属性，格式为props:["","",..]方便数据的传入，为组件提供了通用性。。
export default解释为导出...，与组件在使用的时候需要import对应。