Vue-CLI使用指南

原创
2019/03/08 09:00
阅读数 1.5W

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

如果不安装webpack-cli,会自动提示,用taobao的会报错。

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等文件夹

官网建议国内使用taobao镜像。 https://cn.vuejs.org/v2/guide/installation.html#AMD-模块加载器

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

vue-cli2.x如何升级vue-cli3,详细也见官网:https://cli.vuejs.org/zh/guide/installation.html https://segmentfault.com/q/1010000016687692

创建

  • 初始化项目
    • 有三种方式:
    • 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 

vue ui

访问about:Vue-cli 的 3.x 版本由内到外完全重写,带来了许多很棒的新特性。你可以在你的项目中选用路由、Vuex 和 Typescript 等等特性,并为项目添加“vue-cli 插件”。不过,这么多的选项也意味着它更加复杂,难以上手。因此我们认为,相比局限的命令行界面,一个成熟的 GUI 更能帮助你发掘这些新特性,搜索和安装 vue-cli 插件,解锁更多可能。总的来说,vue-cli 不仅能让你轻松启动新项目,并且在后续的工作中仍会是你的得力助手。

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 

文件名为什么小写 http://www.ruanyifeng.com/blog/2017/02/filename-should-be-lowercase.html

全部都报错: 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:23 at 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
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部