Vue-CLI3 Create Project

webpack

安装webpack
- npm install webpack -g
- npm install webpack-cli -g
- 也可以同时：npm install webpack webpack-cli -g
查看版本
- webpack -v

$ webpack -v
4.29.5

DannideMacBook-Pro:vue-desktop danni$ webpack -v
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm ERR! path /Users/danni/Library/Caches/WebStorm2018.2/projectGenerators/vue/http:/registry.npm.taobao.org/vue/download/vue-2.5.17.tgz
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall stat
npm ERR! enoent ENOENT: no such file or directory, stat '/Users/danni/Library/Caches/WebStorm2018.2/projectGenerators/vue/http:/registry.npm.taobao.org/vue/download/vue-2.5.17.tgz'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/danni/.npm/_logs/2019-02-26T07_14_11_382Z-debug.log
undefined

vue-cli

安装vue-cli
- npm install vue-cli -g
- 或者 npm install --global vue-cli
- 如已安装，见下:升级vue-cli3
查看vue-cli版本
- vue -V
命令所在目录
- /Users/danni/.nodejs/bin
- 安装后多了vue这个文件（可执行文件，js）
- vue -> ../lib/node_modules/@vue/cli/bin/vue.js
- 因此，其实也可以到该目录下，执行 vue.js -V (可打开此js文件看看)
命令其实指向安装的目录
- /Users/danni/.nodejs/lib/node_modules
- 下面有webpack、webpack-cli、vue-cli等文件夹

vue-cli2.x升级vue-cli3
- 卸载：npm uninstall vue-cli -g 或 yarn global remove vue-cli
- 安装：npm install -g @vue/cli 或 yarn global add @vue/cli
- 2时，/Users/danni/.nodejs/lib/node_modules下只有vue-cli目录
- 3后，/Users/danni/.nodejs/lib/node_modules下还多了@vue目录，专门存放命令文件vue.js
我从2.9.6升级到3.4.1

DannideMacBook-Pro:node_modules danni$ vue -V
2.9.6
DannideMacBook-Pro:node_modules danni$ npm uninstall vue-cli -g
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
removed 621 packages in 26.24s
DannideMacBook-Pro:bin danni$ npm install -g @vue/cli
npm WARN deprecated cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
/Users/danni/.nodejs/bin/vue -> /Users/danni/.nodejs/lib/node_modules/@vue/cli/bin/vue.js

> fsevents@1.2.7 install /Users/danni/.nodejs/lib/node_modules/@vue/cli/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download
[fsevents] Success: "/Users/danni/.nodejs/lib/node_modules/@vue/cli/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

> protobufjs@6.8.8 postinstall /Users/danni/.nodejs/lib/node_modules/@vue/cli/node_modules/protobufjs
> node scripts/postinstall


> nodemon@1.18.10 postinstall /Users/danni/.nodejs/lib/node_modules/@vue/cli/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate

+ @vue/cli@3.4.1
added 743 packages from 516 contributors in 65.003s
DannideMacBook-Pro:bin danni$ vue -V
3.4.1

创建

初始化项目
- 有三种方式：
- 3版本（新版本）
  - vue create xxx
- 3版本（界面）
  - vue ui
- 2版本（旧版本）
  - 先全局安装@vue/cli-init
    - npm install @vue/cli-init -g
    - 如果不安装，会报错提示你需要安装。然后初始化新建项目
    - 如果使用的是vue-cli2.x版本，则不需要安装@vue/cli-init
    - vue init webpack xxx
    - 关于@vue/cli-init这个桥接的工具，可看https://www.jianshu.com/p/5e13bc2eb97c

vue create

DannideMacBook-Pro:web-framework danni$ vue create vue-cli3-all


Vue CLI v3.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)Babel, TS, PWA, Router, Vuex, CSS Pre-process
ors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedica
ted config files
? Save this as a preset for future projects? No


Vue CLI v3.4.1
✨  Creating project in /Users/danni/work/svn/git248/baseline/web-framework/vue-cli3-all.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.12.3
info No lockfile found.
[1/4] 🔍  Resolving packages...



success Saved lockfile.
✨  Done in 93.73s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 24.19s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-cli3-all.
👉  Get started with the following commands:

 $ cd vue-cli3-all
 $ yarn serve

选项：

? Pick a linter / formatter config:
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
❯ In dedicated config files
  In package.json

? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM

一些选项说明
- https://blog.csdn.net/qq_36407748/article/details/80739787

vue ui

vue ui
该命令启动的是8000端口
自动在chrome中打开界面（url为：http://localhost:8000/project）
根据解密操作
项目仪表盘：http://localhost:8000/dashboard

DannideMacBook-Pro:web-framework danni$ vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

创建项目时日志

Vue CLI v3.4.1
✨  Creating project in /Users/danni/work/svn/git248/baseline/web-framework/vue-desktop.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

{"type":"warning","data":"\" > @vue/cli-plugin-typescript@3.4.1\" has unmet peer dependency \"typescript@>=2\"."}
{"type":"warning","data":"\"@vue/cli-plugin-typescript > fork-ts-checker-webpack-plugin@0.5.2\" has unmet peer dependency \"typescript@^2.1.0 || ^3.0.0\"."}
{"type":"warning","data":"\"@vue/cli-plugin-typescript > ts-loader@5.3.3\" has unmet peer dependency \"typescript@*\"."}
{"type":"warning","data":"\"@vue/cli-plugin-typescript > tslint@5.13.0\" has unmet peer dependency \"typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >=3.0.0-dev || >= 3.1.0-dev || >= 3.2.0-dev\"."}
{"type":"warning","data":"\"@vue/cli-plugin-typescript > tslint > tsutils@2.29.0\" has unmet peer dependency \"typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >= 3.0.0-dev || >= 3.1.0-dev\"."}
{"type":"warning","data":"\"@vue/cli-plugin-unit-mocha > mocha-webpack@2.0.0-beta.0\" has unmet peer dependency \"webpack@^4.0.0\"."}
{"type":"warning","data":"\"@vue/cli-plugin-e2e-cypress > eslint-plugin-cypress@2.2.1\" has unmet peer dependency \"eslint@>= 3.2.1\"."}
{"type":"warning","data":"\" > @vue/cli-service@3.4.1\" has unmet peer dependency \"vue-template-compiler@^2.0.0\"."}
🚀  Invoking generators...
📦  Installing additional dependencies...

{"type":"warning","data":"\"@vue/cli-plugin-e2e-cypress > eslint-plugin-cypress@2.2.1\" has unmet peer dependency \"eslint@>= 3.2.1\"."}
{"type":"warning","data":"\"@vue/cli-plugin-unit-mocha > mocha-webpack@2.0.0-beta.0\" has unmet peer dependency \"webpack@^4.0.0\"."}
{"type":"warning","data":"\" > sass-loader@7.1.0\" has unmet peer dependency \"webpack@^3.0.0 || ^4.0.0\"."}
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-desktop.
👉  Get started with the following commands:

 $ cd vue-desktop
 $ yarn serve

vue init

DannideMacBook-Pro:web-framework danni$ vue init webpack vue-desktop

  Command vue init requires a global addon to be installed.
  Please run yarn global add @vue/cli-init and try again.
DannideMacBook-Pro:web-framework danni$ npm install @vue/cli-init -g
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
+ @vue/cli-init@3.4.1
added 254 packages from 208 contributors in 30.739s
DannideMacBook-Pro:web-framework danni$ vue init webpack vue-desktop

? Target directory exists. Continue? Yes
? Project name vue-desktop
? Project description A Vue.js project
? Author ouyangda <ouyangda@asiainfo.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

   vue-cli · Generated "vue-desktop".


# 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.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: pify@3.0.0 (node_modules/_pify@3.0.0@pify):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Cannot read property 'raw' of undefined
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: extsprintf@1.4.0 (node_modules/_extsprintf@1.4.0@extsprintf):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Cannot read property 'raw' of undefined

npm ERR! path /Users/danni/work/svn/git248/baseline/web-framework/vue-desktop/node_modules/.staging/supports-color-67f1ff1a
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/Users/danni/work/svn/git248/baseline/web-framework/vue-desktop/node_modules/.staging/supports-color-67f1ff1a' -> '/Users/danni/work/svn/git248/baseline/web-framework/vue-desktop/node_modules/_supports-color@5.5.0@supports-color'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/danni/.npm/_logs/2019-02-26T08_19_08_400Z-debug.log


Running eslint --fix to comply with chosen preset rules...
# ========================


> vue-desktop@1.0.0 lint /Users/danni/work/svn/git248/baseline/web-framework/vue-desktop
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"

sh: eslint: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! vue-desktop@1.0.0 lint: `eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the vue-desktop@1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/danni/.npm/_logs/2019-02-26T08_19_08_923Z-debug.log

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

To get started:

  cd vue-desktop
  npm run dev

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

四个需要选择的选项

? Pick an ESLint preset
❯ Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)

? Pick a test runner (Use arrow keys)
❯ Jest
  Karma and Mocha
  none (configure it yourself)

? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
❯ Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

全部都报错：stack: JSONResponseFormatError: Unexpected token < in JSON at position 0 (data json format: "<html>\r\n<head><title>500 Internal Server Error</title></head>\r\n<body>\r\n<center><h1>500 Internal Server Error</h1></center>\r\n<hr><center>nginx/1.15.6</center>\r\n</body>\r\n</html>\r\n"), GET https://registry.npm.taobao.org/raw-body 500 (connected: true, keepalive socket: true, agent status: {"createSocketCount":20,"createSocketErrorCount":0,"closeSocketCount":8,"errorSocketCount":0,"timeoutSocketCount":5,"requestCount":912,"freeSockets":{"cdn.npm.taobao.org:443::::::::true::::::::":2},"sockets":{"registry.npm.taobao.org:443::::::::true::::::::":10},"requests":{"registry.npm.taobao.org:443::::::::true::::::::":14}}, socketHandledRequests: 83, socketHandledResponses: 83)headers: {"date":"Tue, 26 Feb 2019 08:39:34 GMT","content-type":"text/html","content-length":"177","connection":"keep-alive"}at JSON.parse (<anonymous>)at parseJSON (/Users/danni/.nodejs/lib/node_modules/cnpm/node_modules/urllib/lib/urllib.js:1074:24)at /Users/danni/.nodejs/lib/node_modules/cnpm/node_modules/urllib/lib/urllib.js:806:23at decodeContent (/Users/danni/.nodejs/lib/node_modules/cnpm/node_modules/urllib/lib/urllib.js:613:14)at IncomingMessage.<anonymous> (/Users/danni/.nodejs/lib/node_modules/cnpm/node_modules/urllib/lib/urllib.js:787:7)at IncomingMessage.emit (events.js:187:15)at endReadableNT (_stream_readable.js:1094:12)at process._tickCallback (internal/process/next_tick.js:63:19)怀疑是cnpm的问题：https://github.com/cnpm/cnpm/issues/175果然是：http://blog.sina.com.cn/s/blog_17689050c0102yhq1.html

nodejs/lib/node_modules/cnpm/node_modules/urllib/lib/urllib.js
修改掉文件里面的常量 TIMEOUT、TIMEOUTS 的 5s 为 10s

Danni3