node.js & 组件

一、node.js和npm

1、node是一个让Java Script运行在服务端的开发平台

2、npm工具（基于node.js的包管理器）

（1）npm init：让package.json初始化

（2）安装模块

• （2.1）npm i axios：安装axios库到所在文件夹
• （2.2）npm i jquery --save-dev：安装jquery 库到所在文件夹
• （2.3）npm i http-server -g：全局安装本地服务器
  • 启动命令：hs -o -p 8888

（3）npm i ：安装package.json的所有依赖模块

二、组件化开发

• 安装Vetur插件，用于组件开发时提示代码（scaffold：快速创建组件标签）
• vue代码提示插件VueHelper

1、创建一个组件

（1）导出组件：export default { }

export default {
     data:{
         return{
         }
     },
     methods:{
     },
     created(){ 
     }
}

（2）导入组件到页面中：import 组件名 from ‘ 组件路径 ’

    import Switch from '@/views/demo/Switch'

（3）导入的组件要进行注册：components: { 组件名 }

    components:{
        Switch
    }

2、使用组件

• 在页面组件（即父组件）中导入子组件后，以子组件名为标签名进行使用
• template标签下只能拥有一个根标签

  <template>
      <div>
              <Switch></Switch>
      </div>
  </template

3、单文件组件

• 在实际开发工程化vue项目时，基本都是使用单文件组件形式，即每个.vue文件都是一个组件。最基本的就是UI组件了，我们一般会根据自己的喜好和项目的需要选择一个成熟的组件库来使用，iView组件库、饿了么的Element组件库都是很优秀很全面的组件库，虽然都能满足我们的需求，可众口难调，总有一些特殊的需求不能满足，这个时候就需要我们自己去开发组件实现特殊的需求了。

三、vue-admin

基于vue+饿了么UI的模板系统

• npm run dev：启动项目

每日额外

（1）if语句中的括号不能声明变量，以及函数声明

（2）h1标签自带padding

（3）饿了么UI库样式修改，可以通过控制台查看class名，以该class名进行样式覆盖