三: vue组件开发及自动化工具vue-cli

一: 组件化开发

1 组件

1: 组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的网站之间，也存在同样的功能。
2: 什么是组件
而在网页中实现一个功能，需要使用html定义功能的内容结构，使用css声明功能的外观样式，还要使用js来定义功能的特效，因此就产生了把一个功能相关的[HTML、css和javascript]代码封装在一起组成一个整体的代码块封装模式，我们称之为“组件”。
组件就是一个html网页中的功能，一般就是一个标签，标签中有自己的内容结构，样式和特效。这样，前端人员就可以在开发时，只需要书写一次代码，随处引入即可使用。
3: 组件的种类
组件有两种：默认组件[全局组件] 和 单文件组件

组件概念

2 默认组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <style>
     .com{
         border: 1px solid red;
         padding: 4px 7px;
     }
    </style>
</head>
<body>
    <div id="app1">
        <span @click="num++">+</span>
        <input type="text" size="1" v-model="num">
        <span @click="num--">-</span>
    </div>

    <script>
        let vm =new Vue({
            el:"#app1",
            data:{
                num:0,
            }
        });
    </script>
    <div id="app2">
       <my-component></my-component>
    </div>
    <script>
        Vue.component("my-component",{
            //html视图模板代码,这里的代码和前面我们写的指令代码没有区别
            template:'<div class="com"><span @click="num++">+</span><input type="text" size="1" v-model="num"><span @click="num--">-</span></div>',
            methods:{
                //这里可以定义组件的html 代码中需要调用的方法
            },
            data: function () {
                //z这里的data就是当前组件中使用到的局部数据,必须
                //以return返回一个json对象
                return{
                    num:0,
                }
            }
        });
        let vm2=new Vue({
            el:"#app2",
            data:{}
        })
    </script>
</body>
</html>

默认组件案例

二: vue自动化工具(vue-cli)

1 vue-cli自动化工具的部署和安装

    官网：https://cli.vuejs.org/zh/
    Vue CLI 需要 [Node.js](https://nodejs.org/) 8.9 或更高版本 (推荐 8.11.0+)
    需要使用nvm依赖
    nvm工具的下载和安装：win:   https://www.jianshu.com/p/d0e0935b150a
                                   mac:  https://www.jianshu.com/p/622ad36ee020

安装完成后可查看环境变量是否设置好

2 常用的nvm命令

nvm list   # 列出目前在nvm里面安装的所有node版本
nvm install node版本号      # 安装指定版本的node.js
nvm uninstall node版本号    # 卸载指定版本的node.js
nvm use node版本号          # 切换当前使用的node.js版本

如果使用nvm工具，则直接可以不用自己手动下载，如果使用nvm下载安装 node的npm比较慢的时候，可以修改nvm的配置文件(在安装根目录下)

# settings.txt
root: C:\tool\nvm    [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

三:安装node.js

1: node.js

1: node.js是什么?
Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：
2: 运行环境和功能
- 运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上
- 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写        数据库。
3: 下载地址:https://nodejs.org/en/download/
4: 安装成功之后可以在终端输入: node -v               查看版本

node.js的介绍

2: npm

在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档

3: 使用vue-cli初始化创建项目

1:生成项目目录

// 生成一个基于 webpack 模板的新项目
vue init webpack 项目名
例如：
vue init webpack myproject
// 启动开发服务器 ctrl+c 停止服务
cd myproject
npm run dev           # 运行这个命令就可以启动node提供的测试http服务器

三: vue组件开发及自动化工具vue-cli

猜你喜欢