Vue-CLI使用指南

時間  2019-11-11
標籤 vue cli 使用 指南 简体版
原文   原文鏈接

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的會報錯。javascript

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-clihtml

    • npm install vue-cli -g
    • 或者 npm install --global vue-cli
    • 如已安裝，見下:升級vue-cli3

  • 查看vue-cli版本vue

    • vue -V

  • 命令所在目錄java

    • /Users/danni/.nodejs/bin
    • 安裝後多了vue這個文件（可執行文件，js）
    • vue -> ../lib/node_modules/@vue/cli/bin/vue.js
    • 所以，其實也能夠到該目錄下，執行 vue.js -V (可打開此js文件看看)

  • 命令其實指向安裝的目錄node

    • /Users/danni/.nodejs/lib/node_modules
    • 下面有webpack、webpack-cli、vue-cli等文件夾

官網建議國內使用taobao鏡像。 https://cn.vuejs.org/v2/guide/installation.html#AMD-模塊加載器webpack

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/1010000016687692github

建立

  • 初始化項目
    • 有三種方式：
    • 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

選項：web

? 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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程