遇见Vue.js
- 关键词:Vue.js – 读书笔记
十五、vue-cli
vue.js在开发大型应用时,我们需要考虑代码目录结构、项目构建和部署、热加载、代码单元测试等事情。
vue-cli脚手架工具用来快速构建项目。
基本使用
使用vue-cli来快速生成一个基于Webpack构建的项目
vue init webpack my-project
安装依赖 npm install
启动项目 npm run dev
命令
vue-cli安装后的全局命令是vue,它支持以下两个命令:vue init
init
用来基于指定模板生成项目结构,template是模板名,project为要生成的目录名。
list
用来列出所有可用的模板。
模板
vue-cli模板分为官方模板、自定义模板和本地模板。
官方模板
自定义模板
可以fork官方模板按照自己的需求修改后,通过vue-cli命令生成基于自己模板的项目结构:
vue init username/repo my-project
本地模板
vue init ~/fs/path/to-custom-template my-project
不错的工具包
工具包 | 说明 |
---|---|
commander | 一个命令行接口的解决方案,提供了一些接口方便我们对命令行的命令做解析 |
download-git-repo | 将相应的git库下载到指定的本地文件夹 |
inquirer | 常见的交互式命令行用户页面的集合,可以简化流程:提供错误反馈、询问问题、解析输入、验证结果 |
ora | 可以让我们在终端展示加载效果 |
测试开发与调试
测试工具
ESLint就是一个Lint工具,为大家提供一个可扩展、每条规则独立、不内置编码风格的语法检查工具。
它被设计成完全可配置的,每一条规则都是一个插件,用户完全可以根据自己的需求来选择使用哪些规则。
在项目中配置ESLint有两种基本方法:
用JavaScript注解的方式将配置信息直接加到文件里。
使用JavaScript、JSON或YAML文件为整个目录定义配置信息。文件格式可以是.eslintrc.*或package.json。ESLint会自动查找并读取配置文件。
展示一下基本的配置规则:
<!-- package.json -->
//1.Enviroments
//脚本将要运行的环境,每个环境都有自己预定义好的全局变量集合
{
"env":{
"browser": true,
"node": true
}
}
//2.Globals
//在脚本运行期间需要额外加入的全局变量,当变量在当前文件中未定义却被访问时,会触发未定义规则警告
{
"globals":{
"varA": true,
"varB": false(只读)
}
}
//3.Rules
//用户通过配置规则是否生效来定义自己的项目需要使用哪些规则
{
"rules":{
"eqeqe": "off",
"curly": "error"
}
}
工具包
<!-- webpack.config.js -->
1.eslint-loader
//...
module.exprots = {
loaders: [
{test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
]
}
2.eslint-friendly-formatter
//这个组件可以友好地提示语法问题,并且支持点击错误提示直接打开subline文件。它可以被当做一个模块引用,还可以配合gulp或grunt使用
3.eslint-config-standard
//为大家提供一些可共享的JavaScript标准格式配置,在自己的工程中加入.eslintrc文件
<!-- .eslintrc文件 -->
{
"extends": "standard"
}
4.eslint-plugin-html
//一个支持从HTML等文件的<script>标签中读取配置的插件
开发工具
开发工具 | 问题说明 |
---|---|
Vue Syntax Highlight | .vue后缀文件中的内容不会被自动高亮显示 |
Snippets | 自动补全(db + Tab = debugger) |
WebStorm | 识别.vue文件(Preference-Plugins-Browse Repositories-Vue.js-Install)和识别ES6语法(Preferences-Editor-Language Injections) |
WebStorm | 识别*.js(Preferences-Languages&Frameworks-javascript-javascript language version: ECMAScript6) |
调试工具 | 问题说明 |
---|---|
Chrome-Vue Devtools | 该工具可以展示出各个组件的层级结构、组件当前的状态、组件的prop值 |