vue组件化编码

一、使用vue-cli创建模板项目

1】vue-cli是vue官方提供的脚手架工具（一个库）

http://www.github.com/vuejs/vue-cli

2】创建vue项目

npm install -g vue-cli(注：只需要安装一次脚手架)

vue init webpack vuedemo（注：webpack是模板，提供了6个可选模板项目）

（会提示几个问题，第一个问题name必须小写，暂时不需要安装vue-router，两个单元测试的包也不需要）

cd vuedemo

npm install

npm run dev

访问：http://localhost:8080/

二、基于脚手架编写项目

1】组件之.vue格式文件

//文件名格式为App.vue
<template></template>//写html
<script></script>//写js
<style></style>//写css

2】基本步骤

①在src文件夹新建一个根组件，名为：App.vue

<!--根组件-->
<template>
<div>
  <img class="logo" src="./assets/logo.png" alt="logo">
  <!--3.使用组件标签-->
  <HelloWorld></HelloWorld>

</div>
</template>

<script>
  //1.引入组件
  import HelloWorld from "./components/HelloWorld";
export  default {
  //2.映射组件标签
  comments:{
    HelloWorld
  }

}
</script>

<style>
.logo{
  width: 200px;
  height: 200px;
}
</style>

②在src文件夹下新建components文件夹，然后再该文件夹下新建一个子组件，名为：HelloWorld.vue

<!--子组件-->
<template>
    <div>
      <p class="msg">{{msg}}</p>
    </div>
</template>

<script>
    export default {//配置对象（与Vue一致）
      data(){//data必须是一个函数
        return {msg:'helloworld'}

      }

    }
</script>

<style>
.msg{
  color: red;
  font-size: 30px;
}
</style>

③在src文件夹中还需要新建一个main.js文件

/*
    入口JS：创建Vue实例
    */

import Vue from 'vue'
import App from "./App"
new Vue({
  el:'#app',  //是根据index.html里面的div的id值
  components:{
    App
  },
  template:'<App/>'  //模板：vue生命周期中有定义
    
})

三、项目的打包与发布

1】打包：

npm run build

2】发布1：使用静态服务器工具包

npm install -g serve

serve dist (会生产一个新文件夹dist)

访问：http://localhost:5000

3】发布2：使用动态web服务器(tomcat)

①修改配置：webpack.prod.conf.js

output:{

publicPath:’/xxx/’ //打包文件夹名称，要发布的项目名称

}

//如果又要使用静态服务器发布记得需要还原这步，重新打包

②重新打包：

npm run build

③修改dist文件夹为项目名称：xxx

④将xxx拷贝到运行的Tomcat的webapps目录下

⑤访问：http://localhost:8080/xxx

四、ESLint编码规范检查

1】ESLint是一个代码规范检查工具

2】它定义了很多特定的规则，一旦你的代码违背了某一规则，ESLint会作出非常有用的提示

3】官网：http://eslint.org/

4】基本已替代以前的JSLint