VUE：项目的创建、编写、打包及规范检查

VUE：项目的创建、编写及打包

项目的创建

使用 vue-cli 创建模板项目（官方提供的脚手架工具）

https://github.com/vuejs/vue-cli

npm install -g  vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问：http://localhost:8080/

第一个命令需要有npm。可以使用node -v查看是否已经安装，如没有可用下面的传送门

npm是什么及其安装

第二个命令使用时注意切换到想要创建的位置

http://localhost:8080

项目的编写

HelloWorld.vue

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

<script>
export default {    //配置对象（与Vue一致）
  data () {
    return {
      msg: 'TaoSir is studying...'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .msg{
        color:red;
        font-size: 30px;
    }
</style>

App.vue

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

<script>
    //1.引入组件
import HelloWorld from './components/HelloWorld'

export default {
    //2.映射组件标签
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

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

main.js

/*
 * 入口js：创建Vue实例
 */
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
    render: h => h(App)
})

打包

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目录下

规则的错误等级

1）0：关闭规则

2）1：打开规则，并且作为一个警告（信息打印黄色字体）

3）2：打开规则，并且作为一个错误（信息打印红色字体）

在项目根目录下找到该文件修改

规则名：等级

重启服务生效