vue-cli创建vue项目&打包发布&上传/更新github&ESLint代码规范

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

1. vue-cli 是 vue 官方提供的脚手架工具
2. github: https://github.com/vuejs/vue-cli
3. 作用: 从 https://github.com/vuejs-templates 下载模板项目

1.1 创建 vue 项目

添加vue-cli

npm install -g vue-cli

成功

//创建项目
vue init webpack vue_demo

模板项目的结构
|-- 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 文件

//进入项目
cd vue_demo
//运行
npm run dev
访问: http://localhost:8080/

1.2 简单实用 vue

Hello.vue

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

<script>
  export default { //配置对象 (与new vue一致)
    data () { //必须写函数形式
      return {
        msg: 'nihao'
      }
    }
  }
</script>

<style>
  .msg {
    color: blue;
    font-size: 60px;
  }
</style>

App.vue

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

<script>
  //1.引入组件 Hello.vue
  import Hello from './components/Hello.vue'
  export default { //配置对象 (与new vue一致)

    //2.映射组件标签
    components: { //必须写函数
      Hello
    }
  }
</script>

<style>
  .img{
    width: 100px;
    height: 100px;
  }
</style>

main.js

/**
 * 入口JS: 创建Vue实例
 */
import Vue from 'vue'
import App from './App.vue'

let vm = new Vue({
  el: '#app', //主index.html 
  components: {
    App
  },
  //创建 App.vue模板
  template: '<App/>'
})
Vue.use({
  vm
})

2 项目的打包与发布

2.1 打包

1.【修改index.js】修改config目录下的index.js，将assetsPublicPath: '/'改为assetsPublicPath: ‘./’，注意，有两处，都要改，不然打包部署到tomcat上面访问是一片空白.

npm run build

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

npm install -g serve
serve dist

访问: http://localhost:5000

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

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

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

重新打包:

npm run build

修改 dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
访问: http://localhost:8080/xxx

2.2.4 tomcat部署

在tomcat的webapps文件夹下以项目名称新建一个文件夹，比如vue_demo，然后将index.html和static文件夹复制到vue_demo文件夹下，现在就可以启动服务器了，访问正常。

3. 上传/更新github

3.1上传本地代码

第一步：去github上创建自己的Repository，创建页面如下图所示：

红框为新建的仓库的https地址

第二步：

echo "# Test" >> README.md

第三步：建立git仓库

git init

第四步：将项目的所有文件添加到仓库中

git add .

第五步：

git add README.md

第六步：提交到仓库

git commit -m "注释语句"

第七步：将本地的仓库关联到GitHub，后面的https改成刚刚自己的地址，上面的红框处

git remote add origin https://github.com/xxxxx/vue_test.git

第八步：上传github之前pull一下

git pull origin master

第九步：上传代码到GitHub远程仓库

git push -u origin master

中间可能会让你输入Username和Password，你只要输入github的账号和密码就行了。执行完后，如果没有异常，等待执行完就上传成功了。

3.2更新代码

第一步：查看当前的git仓库状态，可以使用git status

git status

第二步：更新全部

git add *

第三步：接着输入git commit -m “更新说明”

git commit -m "更新说明"

第四步：先git pull,拉取当前分支最新代码

git pull

第五步：push到远程master分支上

git push origin master

不出意外，打开GitHub已经同步了
//-------------------------------------------------------------------------------

3.3如何在vscode上提交代码到github

1:

2：

3：

4

4. ESLint 代码规范检查工具（忽略警告的错误）

4.1 说明

1. ESLint 是一个代码规范检查工具
2. 它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint会作出非常有用的提示
3. 官网: http://eslint.org/
4. 基本已替代以前的 JSLint
   2.3.2. ESLint 提供以下支持
5. ES
6. JSX
7. style 检查
8. 自定义错误和提示

4.2 ESLint 提供以下几种校验

1. 语法错误校验
2. 不重要或丢失的标点符号，如分号
3. 没法运行到的代码块（使用过 WebStorm 的童鞋应该了解）
4. 未被使用的参数提醒
5. 确保样式的统一规则，如 sass 或者 less
6. 检查变量的命名
   2.3.4. 规则的错误等级有三种
7. 0：关闭规则。
8. 1：打开规则，并且作为一个警告（信息打印黄色字体）
9. 2：打开规则，并且作为一个错误（信息打印红色字体）

4.3 关闭ESLint