vue-cli（vue脚手架）入门

2022-11-15 13:29:29 浏览数 (1)

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）

代码语言：javascript复制
npm install ‐g @vue/cli

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

代码语言：javascript复制
vue ‐‐version

2 使用cli3创建Vue2项目

（1）创建项目

代码语言：javascript复制
vue create 项目名称

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

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

代码语言：javascript复制
cd 项目名称
npm run serve

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

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

使用 vue­cli 创建的vue项目引入了 webpack 包管理和构建机制，引入了 babel 的新一代的 JavaScript（ES6或TypeScript）编译机制，因此开发语法与传统的ES5编程差异较大。

在项目中，我们使用名称为“*.vue”的文件去编写vue2组件，我们把这种组件称为“单文件组 件” 。

下面是典型的单文件组件的结构。

代码语言：javascript复制
<template>
  模板区：用于定义组件外观的 DOM 结构
</template>
<script>
export default {
  代码区：用于定义Vue组件的name、props、components、data、生命周期函数、methods等
}
</script>

3 一个简单的示例Rating：

（1）定义Rating.vue组件

代码语言：javascript复制
<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组件

代码语言：javascript复制
<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）安装：

代码语言：javascript复制
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依然失败，这时可以使用下面指令清除一下本地的缓存信息。

代码语言：javascript复制
npm cache clean ‐‐force

（3）搜索：

代码语言：javascript复制
npm search xxx

快捷方式（s）

xxx 搜索xxx 如：npm search jquery。

（4）卸载

代码语言：javascript复制
npm uninstall xxx

快捷方式（r）

xxx 卸载xxx。多个依赖可用空格分割。

xxx ­D 卸载xxx，并将依赖信息从package.json中的devDependencies中清除。

（5）列出已安装依赖

代码语言：javascript复制
npm list ‐g

默认列出局部依赖。

npm list ­g 列出已安装的全局依赖。

（6）更新依赖

代码语言：javascript复制
npm update xxx

xxx 局部更新xxx。

xxx ­g 全局更新xxx。

（7）查看依赖安装路径（也就是node_modules的路径）

代码语言：javascript复制
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 中 添加：

代码语言：javascript复制
  'no‐tabs': 0,
  'no‐mixed‐spaces‐and‐tabs': 0,
  'indent': ["off", "tab"],
  'no‐trailing‐spaces': 0,

完整配置如下：

代码语言：javascript复制
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
  }
}
vue.js npm node.js javascript json

0 人点赞