安装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文件