vue-cli（vue脚手架）入门

1 安装Vue­Cli3（Vue­Cli4）

vue­cli 官网：https://cli.vuejs.org/zh/

（1）安装Node.js和Npm vue­cli

基于服务器端JavaScript运行环境Node.js和包管理工具Npm，因此需要先安装 Node.js，cli3要求Node版本大于8.9

Node官网：https://nodejs.org/zh­cn/

（2）安装vue­cli3（vue­cli4）

npm install ‐g @vue/cli

安装成功后，可以通过以下指令查看vue­cli版本

vue ‐‐version

2 使用cli3创建Vue2项目

（1）创建项目

vue create 项目名称

初学可以先选择默认设定——default

创建成功后，可以根据提示运行项目

cd 项目名称
npm run serve

 （2）vue2­cli3 的项目基本结构

 （3）单文件组件（*.vue）

使用 vue­cli 创建的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 xxx

xxx 局部更新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
  }
}