Vue学习笔记

安装cnpm

由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像—cnpm

C:\Users\lenovo>npm config set registry "http://registry.npmjs.org/"
C:\Users\lenovo>npm install -g cnpm

如果遇到错误，请查看log，比如我遇到了如下问题

C:\Users\lenovo>npm install -g cnpm
npm ERR! code E404
npm ERR! 404 Not Found: cnpm@latest
终止批处理操作吗(Y/N)? y

发现是因为proxy的原因，我之前设置了proxy，关于proxy的说明，可以执行

C:\Users\lenovo>npm help config

根据log添加或删除或修改proxy

创建项目的一个简单示例

D:\>cd Develop

D:\Develop>vue init webpack manage

  Command vue init requires a global addon to be installed.
  Please run npm install -g @vue/cli-init and try again.


D:\Develop>npm install -g @vue/cli-init
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
+ @vue/cli-init@3.5.0
added 254 packages from 208 contributors in 98.744s

D:\Develop>vue init webpack manage

? Project name manage
? Project description A Vue.js project
? Author tiplip
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "manage".


# Installing project dependencies ...
# ========================

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> uglifyjs-webpack-plugin@0.4.6 postinstall D:\Develop\manage\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1125 packages from 650 contributors and audited 10657 packages in 229.952s
found 3 vulnerabilities (1 low, 1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

# Project initialization finished!
# ========================

To get started:

  cd manage
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

Vue代码使用ESLint检查出的语法格式问题

ESLint语法错误：https://www.cnblogs.com/crazycode2/p/6507648.html

eslint的语法要求太过严格，令人无法适应

已定义没被引用的方法

reset/config is defind but never used

参考：https://blog.csdn.net/sinat_37680470/article/details/79716331

函数名与（间的空格

错误提示：http://eslint.org/docs/rules/space-before-function-paren  Missing space before function parentheses

错误实例：

jump(params){

}

正确实例:

jump (params)  {

}

单引号与双引号

错误提示：http://eslint.org/docs/rules/quotes  Strings must use singlequote

错误实例

export default {
  name: "HelloWorld",
  data () {
    return {
      msg: "Welcome to Your Vue.js App"
    }
  }
}

正确实例

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

模板中的错误

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead

原因：vue模板只能有一个根对象

错误

<template>
  <div>欢迎来到人员管理系统</div>
  <footer-nav></footer-nav>
</template>

正确

<template>
  <div>
    欢迎来到人员管理系统
    <footer-nav></footer-nav>
  </div>  
</template>

VS Code中Vue代码格式化的问题

1. 因为格式化导致段尾被添加了多余英文分号;的问题，见https://www.cnblogs.com/nxmin/p/8523832.html

2. 因为格式化导致方法与括号之间的空格被删除的问题，见https://segmentfault.com/a/1190000014785115

在VS Code中debug Vue代码

参考：https://code.visualstudio.com/docs/nodejs/vuejs-tutorial#_debugging

需要注意的是，我使用官方文档中的配置无法击中断点，

出现断点无法命中的原因基本上都是因为sourceMapPathOverrides配置不正确导致的

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    }
  ]
}

我的配置是

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

还有一种容易被忽视的原因，如果设置不上断点，可能是文件的类型没有选对，比如*.vue文件