（六）Vue的组件编码

1: 使用 vue-cli  创建模板项目

npm install -g vue-cli //全局安装vue脚手架工具

vue init webpack vue_demo

cd vue_demo

npm install //安装依赖

npm run dev //启动服务器

访问: http://localhost:8080/

 2：项目目录

|-- build : webpack 相关的配置文件夹(基本不需要修改)

|-- dev-server.js : 通过 express 启动后台服务器

|-- config: webpack 相关的配置文件夹(基本不需要修改)

|-- index.js: 指定的后台服务的端口号和静态资源文件夹

|-- node_modules

|-- src : 源码文件夹

|-- components: vue 组件及其相关资源文件夹

|-- App.vue: 应用根主组件

|-- main.js: 应用入口 js

|-- static: 静态资源文件夹

|-- .babelrc: babel 的配置文件

|-- .eslintignore: eslint 检查忽略的配置

|-- .eslintrc.js: eslint 检查的配置

|-- .gitignore: git 版本管制忽略的配置

|-- index.html: 主页面文件

|-- package.json: 应用包配置文件

|-- README.md: 应用描述说明的 readme 文件

HelloWorld组件化编码

1：编写组件

<template>

  <div>
    <img src="./assets/logo.png" alt="logo"/>

  <!--使用组件标签-->
  <HelloWorld/>
  </div>
</template>

<script>
  //引入子模块
  //引入组件
  import HelloWorld from "./components/HelloWorld"
  export default {
     //配置文件
     components:{
       //映射组件
       HelloWorld
     }

  }
</script>

<style>


</style>

<template>

    <div>
      <p class="hello">{{msg}}</p>
    </div>
</template>

<script>
    export default {
        //默认暴露一个模块
      //配置对象，模板里面只能写函数不能写对象
      data(){
        return {
          msg :"Hello vue"
        }
      }
    }
</script>

<style>
 .hello{
   width: 200px;
   height: 200px;
   background-color: red;
 }

</style>

2：项目打包发布运行

npm run dev 只是开发环境运行

//打包 npm run build

发布 1:  使用静态服务器工具包

npm install -g serve

serve dist

访问: http://localhost:5000

发布 2:  使用动态 web  服务器(tomcat)

修改配置: webpack.prod.conf.js

output: {

publicPath: '/xxx/' //打包文件夹的名称

}

重新打包:

npm run build

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

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

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

3:eslint

(1) .eslintrc.js : 全局规则配置文件

'rules': {

'no-new': 1

}

(2) 在 js/vue 文件中修改局部规则

/* eslint-disable no-new */

new Vue({

el: 'body',

components: { App }

})

(3) .eslintignore: 指令检查忽略的文件

*.js

*.vue