Vue笔记(九)vue-cli搭建项目 eslint

使用 vue-cli 创建模板项目

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

创建 vue 项目

使用vue脚手架创建项目必须安装node和npm

安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

全局安装vue-cli

cnpm install -g vue-cli 

 选择文件夹，下载项目

vue init webpack

cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/

模板项目的结构

|-- 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 文件

 

项目的打包与发布

打包: 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

 

eslint

说明
1) ESLint 是一个代码规范检查工具
2) 它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint会作出非常有用的提示
3) 官网: http://eslint.org/
4) 基本已替代以前的 JSLint

ESLint 提供以下支持
1) ES
2) JSX
3) style 检查
4) 自定义错误和提示

ESLint 提供以下几种校验
1) 语法错误校验
2) 不重要或丢失的标点符号，如分号
3) 没法运行到的代码块
4) 未被使用的参数提醒
5) 确保样式的统一规则，如 sass 或者 less
6) 检查变量的命名

规则的错误等级有三种
1) 0：关闭规则。
2) 1：打开规则，并且作为一个警告（信息打印黄色字体）
3) 2：打开规则，并且作为一个错误（信息打印红色字体）

相关配置文件
1) .eslintrc.js : 全局规则配置文件 'rules': { 'no-new': 1 }
2) 在 js/vue 文件中修改局部规则

/* eslint-disable no-new */
new Vue
({ el: 'body',
components: {
 App
}
})

3) .eslintignore: 指令检查忽略的文件
*.js
*.vue