vue-cli（vue脚手架）入门
1 安装VueCli3（VueCli4）
vuecli 官网：https://cli.vuejs.org/zh/
（1）安装Node.js和Npm vuecli
基于服务器端JavaScript运行环境Node.js和包管理工具Npm，因此需要先安装 Node.js，cli3要求Node版本大于8.9
Node官网：https://nodejs.org/zhcn/
（2）安装vuecli3（vuecli4）
npm install ‐g @vue/cli安装成功后，可以通过以下指令查看vuecli版本
vue ‐‐version2 使用cli3创建Vue2项目
（1）创建项目
vue create 项目名称初学可以先选择默认设定——default
创建成功后，可以根据提示运行项目
cd 项目名称
npm run serve（2）vue2cli3 的项目基本结构
（3）单文件组件（*.vue）
使用 vuecli 创建的vue项目引入了 webpack 包管理和构建机制，引入了 babel 的新一代的 JavaScript（ES6或TypeScript）编译机制，因此开发语法与传统的ES5编程差异较大。
在项目中，我们使用名称为“*.vue”的文件去编写vue2组件，我们把这种组件称为“单文件组 件” 。
下面是典型的单文件组件的结构。
<template>
模板区：用于定义组件外观的 DOM 结构
</template>
<script>
export default {
代码区：用于定义Vue组件的name、props、components、data、生命周期函数、methods等
}
</script>3 一个简单的示例Rating：
（1）定义Rating.vue组件
<template>
<div>
<h3>《{{title}}》，评分：{{number}}</h3>
<button @click="increase">+</button>
<button @click="descrease">‐</button>
</div>
</template>
<script>
export default {
name:"rating",
props:['title', 'score'],
data(){
return{
number: this.socre
}
},
methods:{
increase(){ this.number++; },
descrease(){ this.number‐‐; }
}
}
</script>需要注意的是组件内部，props是不允许修改的，data是可以修改并自动更新界面的，props 和data都可以通过this来访问，因此不应该重名。
（2）修改App.vue 加载Rating.vue组件
<template>
<div id="app">
<rating title="Vue2快速上手" socre="3" />
</div>
</template>
<script>
import Rating from './components/Rating.vue'
export default {
name: 'app',
components: {
Rating
}
}
</script> 附： 1 npm 常用命令
（1）安装：
npm install xxx
（简化 npm i xxx）快捷方式（i) xxx 搜索并安装xxx（局部安装）。
安装多个依赖可用空格分割，如npm install jquery bootstrap。
xxx g 搜索并安装xxx（全局安装）。安装多个同上。
xxx save 安装并将依赖信息写在package.json中的dependencies中。
xxx D 安装并将依赖信息写在package.json中的devDependencies中。
xxx@版本号 指定需要安装的版本号，若不指定将安装最新的稳定版本。
（2）清空缓存
有时使用npm install失败后，由于本地缓存中还保留着残留的安装信息，可能会导致重复执 行npm install依然失败，这时可以使用下面指令清除一下本地的缓存信息。
npm cache clean ‐‐force（3）搜索：
npm search xxx快捷方式（s）
xxx 搜索xxx 如：npm search jquery。
（4）卸载
npm uninstall xxx快捷方式（r）
xxx 卸载xxx。多个依赖可用空格分割。
xxx D 卸载xxx，并将依赖信息从package.json中的devDependencies中清除。
（5）列出已安装依赖
npm list ‐g默认列出局部依赖。
npm list g 列出已安装的全局依赖。
（6）更新依赖
npm update xxxxxx 局部更新xxx。
xxx g 全局更新xxx。
（7）查看依赖安装路径（也就是node_modules的路径）
npm root默认查看局部安装路径。
g 查看全局安装路径。
npm view 查看模块的注册信息
xxx versions 列出xxx的所有版本， 如：npm view jquery versions。
xxx dependencies 列出xxx的所有依赖， 如：npm view gulp dependencies。
2 vue eslint开发 关掉 tab错误提示
错误提示： expected indentation of 2 spaces but found 1 tab
但是 tab 和 space 提示真的很头疼，可以通过下面方式解决
找到vue 项目中的 .eslintrc.js , 在rules 中 添加：
'no‐tabs': 0,
'no‐mixed‐spaces‐and‐tabs': 0,
'indent': ["off", "tab"],
'no‐trailing‐spaces': 0,完整配置如下：
module.exports = {
root: true,
parser: 'babel‐eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/standard/standard/blob/master/docs/RULES‐en.md
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren‐less arrow functions
'arrow‐parens': 0,
// allow async‐await
'generator‐star‐spacing': 0,
// allow debugger during development
'no‐debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'no‐tabs': 0,
'no‐mixed‐spaces‐and‐tabs': 0,
'indent': ["off", "tab"],
'no‐unused‐vars': 0,
'no‐trailing‐spaces': 0,
"eqeqeq": 0
}
}腾讯云开发者
