vue 常用命令

nodejs : http://nodejs.cn/download/

npm install -g npm

 

自动打开浏览器   --open

  "scripts": {
    "pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
    "serve": "vue-cli-service serve --open",
    "dev": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

eslint 要代码检查生效 vue文件需要和vue关联

 

npm config set registry http://registry.npm.taobao.org/
npm  install -g @vue/cli
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org
yarn global add @vue/cli
yarn config get registry 
yarn global add @quasar/cli
npm install -g @quasar/cli
npm i -g eslint-plugin-vue


npm install eslint -g
npm install eslint-plugin-import -g
npm install eslint-config-airbnb -g
npm install eslint-plugin-jsx-a11y -g
npm install eslint-plugin-react -g
npm install babel-eslint -g

 

编译

npm run build

据说yarn更好，那就用这个吧

git clone xxx
yarn
yarn start

Yarn和npm命令对比

npm	yarn
npm install	yarn
npm install react --save	yarn add react
npm uninstall react --save	yarn remove react
npm install react --save-dev	yarn add react --dev
npm update --save	yarn upgrade

yarn安装源改为国内，不然没法用

yarn config set registry https://registry.npm.taobao.org/

 

将本地组件升级

yarn global upgrade -L

 

升级本地组件

yarn upgrade -L

 

yarn config get registry   # 查看当前设置的镜像源地址
# -> https://registry.yarnpkg.com

可以改成 taobao 的源：
yarn config set registry 'https://registry.npm.taobao.org'

 

node-sass 安装失败

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

// 也可以设置系统环境变量的方式。示例
// linux、mac 下
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

// window 下
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass

可以参考：https://segmentfault.com/a/1190000010984731

用yarn初始化命令如下

yarn config set registry https://registry.npm.taobao.org -g

yarn config get registry

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

 

element ui    添加脚手架

npm install -g @vue/cli

 

 

quasar 启动

yarn
yarn install
quasar dev

 

 

TypeError: this.CliEngine is not a constructor   找到对应的文件

//this.CliEngine = require(this.basicPath + "lib/cli-engine");
this.cliEngine = require(packagePath + "lib/cli-engine").CLIEngine;

 

npm WARN tar ENOENT: no such file or directory, open  .staging

npm cache clean -f
npm install -g npm

代码格式化后不符合要求

 

为了和前端保持一致换vscode

设置如下：

{
  "editor.tabSize": 2,
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "window.menuBarVisibility": "default",
  "window.titleBarStyle": "custom",
  "window.zoomLevel": 0,
  "files.autoSave": "off",
  "eslint.autoFixOnSave": true,
  "eslint.packageManager": "yarn",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
  ],
  "emmet.includeLanguages": {
    "vue-html": "html",
  },
  "emmet.triggerExpansionOnTab": true,
  "files.eol": "\n",
  "markdown.preview.fontSize": 18,
  "editor.renderWhitespace": "boundary",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.renderControlCharacters": true,
  "breadcrumbs.enabled": false,
  "editor.minimap.enabled": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "workbench.statusBar.visible": true,
  "workbench.activityBar.visible": true,
  "workbench.colorTheme": "Default Light+",
  "editor.quickSuggestions": {
    "strings": true
  },
  "git.autofetch": true,
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.lineHeight": 1.2,
  "terminal.integrated.letterSpacing": 0.1,
  "terminal.integrated.fontSize": 15, //字体大小设置
  "terminal.integrated.fontFamily": "Lucida Console", //字体设置
}

 

解决eslint上存在的问题,一个快捷键搞定

eslint Cannot read property 'range' of null 解决方案如下： 

"babel-eslint": "8.0.1",