vue-cli脚手架的安装

命令行安装

环境依赖:

  • 必须安装node
  • 验证node是否安装
node -v
npm -v 

对应显示版本号即可,如下图:

 

 

 

全局安装vue-cli

npm install --global vue-cli

如安装过程中安装较慢或较慢,使用手机4G热点安装,亲测好用。

安装成功如下:

C:\Users\Administrator>npm install --global vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour
 @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "c
eescript" (no hyphen)
C:\Users\Administrator\AppData\Roaming\npm\vue -> C:\Users\Administrator\AppD
\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\Administrator\AppData\Roaming\npm\vue-list -> C:\Users\Administrator
pData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\Administrator\AppData\Roaming\npm\vue-init -> C:\Users\vue-init
C:\Users\Administrator\AppData\Roaming\npm
`-- vue-cli@2.9.6
  +-- async@2.6.3
  | `-- lodash@4.17.15
  +-- chalk@2.4.2
  | +-- ansi-styles@3.2.1
  | | `-- color-convert@1.9.3
  | |   `-- color-name@1.1.3
  | +-- escape-string-regexp@1.0.5
  | `-- supports-color@5.5.0
  |   `-- has-flag@3.0.0
  +-- coffee-script@1.12.7
  +-- commander@2.20.3
  +-- consolidate@0.14.5
  | `-- bluebird@3.7.2
  +-- download-git-repo@1.1.0
  | +-- download@5.0.3
  | | +-- caw@2.0.1
  | | | +-- get-proxy@2.1.0
  | | | | `-- npm-conf@1.1.3
  | | | |   +-- config-chain@1.1.12
  | | | |   | +-- ini@1.3.5
  | | | |   | `-- proto-list@1.2.4
  | | | |   `-- pify@3.0.0
  | | | +-- isurl@1.0.0
  | | | | +-- has-to-string-tag-x@1.4.1
  | | | | | `-- has-symbol-support-x@1.4.2
  | | | | `-- is-object@1.0.1
  | | | `-- url-to-options@1.0.1
  | | +-- decompress@4.2.0
  | | | +-- decompress-tar@4.1.1
  | | | | +-- file-type@5.2.0
  | | | | `-- tar-stream@1.6.2
  | | | |   +-- bl@1.2.2
  | | | |   +-- buffer-alloc@1.2.0
  | | | |   | +-- buffer-alloc-unsafe@1.1.0
  | | | |   | `-- buffer-fill@1.0.0
  | | | |   +-- end-of-stream@1.4.4
  | | | |   +-- fs-constants@1.0.0
  | | | |   +-- readable-stream@2.3.6
  | | | |   | +-- isarray@1.0.0
  | | | |   | +-- process-nextick-args@2.0.1
  | | | |   | +-- safe-buffer@5.1.2
  | | | |   | +-- string_decoder@1.1.1
  | | | |   | | `-- safe-buffer@5.1.2
  | | | |   | `-- util-deprecate@1.0.2
  | | | |   +-- to-buffer@1.1.1
  | | | |   `-- xtend@4.0.2
  | | | +-- decompress-tarbz2@4.1.1type@6.2.0
  | | | | +-- seek-bzip@1.0.5
  | | | | | `-- commander@2.8.1
  | | | | |   `-- graceful-readlink@1.0.1
  | | | | `-- unbzip2-stream@1.3.3
  | | | |   `-- buffer@5.4.3
  | | | |     +-- base64-js@1.3.1
  | | | |     `-- ieee754@1.1.13
  | | | +-- decompress-targz@4.1.1
  | | | +-- decompress-unzip@4.0.1type@3.9.0
  | | | | +-- get-stream@2.3.1
  | | | | | +-- object-assign@4.1.1
  | | | | | `-- pinkie-promise@2.0.1
  | | | | |   `-- pinkie@2.0.4
  | | | | `-- yauzl@2.10.0
  | | | |   +-- buffer-crc32@0.2.13
  | | | |   `-- fd-slicer@1.1.0
  | | | |     `-- pend@1.2.0
  | | | +-- graceful-fs@4.2.3
  | | | +-- make-dir@1.3.0
  | | | | `-- pify@3.0.0
  | | | `-- strip-dirs@2.1.0
  | | |   `-- is-natural-number@4.0.1
  | | +-- filenamify@2.1.0
  | | | +-- filename-reserved-regex@2.0.0
  | | | +-- strip-outer@1.0.1
  | | | `-- trim-repeated@1.0.0
  | | +-- get-stream@3.0.0
  | | +-- got@6.7.1
  | | | +-- create-error-class@3.0.2
  | | | | `-- capture-stack-trace@1.0.1
  | | | +-- duplexer3@0.1.4
  | | | +-- is-redirect@1.0.0
  | | | +-- is-retry-allowed@1.2.0
  | | | +-- is-stream@1.1.0
  | | | +-- lowercase-keys@1.0.1
  | | | +-- timed-out@4.0.1
  | | | +-- unzip-response@2.0.1
  | | | `-- url-parse-lax@1.0.0
  | | |   `-- prepend-http@1.0.4
  | | +-- mkdirp@0.5.1
  | | `-- pify@2.3.0
  | `-- git-clone@0.1.0
  +-- handlebars@4.5.3
  | +-- neo-async@2.6.1
  | +-- optimist@0.6.1
  | | +-- minimist@0.0.8
  | | `-- wordwrap@0.0.3
  | +-- source-map@0.6.1
  | `-- uglify-js@3.7.2
  +-- inquirer@6.5.2ansi-escapes@3.2.0
  | +-- cli-cursor@2.1.0
  | | `-- restore-cursor@2.0.0
  | |   +-- onetime@2.0.1
  | |   | `-- mimic-fn@1.2.0
  | |   `-- signal-exit@3.0.2
  | +-- cli-width@2.2.0
  | +-- external-editor@3.1.0
  | | +-- chardet@0.7.0
  | | +-- iconv-lite@0.4.24
  | | | `-- safer-buffer@2.1.2
  | | `-- tmp@0.0.33
  | |   `-- os-tmpdir@1.0.2
  | +-- figures@2.0.0
  | +-- mute-stream@0.0.7run-async@2.3.0
  | | `-- is-promise@2.1.0
  | +-- rxjs@6.5.3
  | | `-- tslib@1.10.0
  | +-- string-width@2.1.1
  | | +-- is-fullwidth-code-point@2.0.0
  | | `-- strip-ansi@4.0.0
  | |   `-- ansi-regex@3.0.0
  | +-- strip-ansi@5.2.0ansi-regex@4.1.0
  | `-- through@2.3.8
  +-- Metalsmith@2.3.0
  | +-- absolute@0.0.1
  | +-- chalk@1.1.3
  | | +-- ansi-styles@2.2.1
  | | +-- has-ansi@2.0.0
  | | | `-- ansi-regex@2.1.1
  | | +-- strip-ansi@3.0.1
  | | `-- supports-color@2.0.0
  | +-- clone@1.0.4
  | +-- co-fs-extra@1.2.1
  | | +-- co-from-stream@0.0.0
  | | | `-- co-read@0.0.1
  | | +-- fs-extra@0.26.7
  | | | +-- jsonfile@2.4.0
  | | | `-- klaw@1.3.1
  | | `-- thunkify-wrap@1.0.4
  | |   `-- enable@1.3.2
  | +-- gray-matter@2.1.1ansi-red@0.1.1ansi-wrap@0.1.0
  | | +-- extend-shallow@2.0.1
  | | | `-- is-extendable@0.1.1
  | | +-- js-yaml@3.13.1
  | | | +-- argparse@1.0.10
  | | | | `-- sprintf-js@1.0.3
  | | | `-- esprima@4.0.1
  | | `-- toml@2.3.6
  | +-- has-generators@1.0.1
  | +-- is@3.3.0
  | +-- is-utf8@0.2.1
  | +-- recursive-readdir@2.2.2
  | +-- stat-mode@0.2.2
  | +-- thunkify@2.1.2
  | +-- unyield@0.0.1
  | | `-- co@3.1.0
  | +-- ware@1.3.0
  | | `-- wrap-fn@0.1.5
  | `-- win-fork@1.1.1
  +-- minimatch@3.0.4
  | `-- brace-expansion@1.1.11
  |   +-- balanced-match@1.0.0
  |   `-- concat-map@0.0.1
  +-- multimatch@2.1.0
  | +-- array-differ@1.0.0
  | +-- array-union@1.0.2
  | | `-- array-uniq@1.0.3
  | `-- arrify@1.0.1
  +-- ora@1.4.0
  | +-- cli-spinners@1.3.1
  | `-- log-symbols@2.2.0
  +-- read-Metadata@1.0.0
  | `-- yaml-js@0.0.8
  +-- request@2.88.0
  | +-- aws-sign2@0.7.0
  | +-- aws4@1.9.0
  | +-- caseless@0.12.0
  | +-- combined-stream@1.0.8
  | | `-- delayed-stream@1.0.0
  | +-- extend@3.0.2
  | +-- forever-agent@0.6.1
  | +-- form-data@2.3.3
  | | `-- asynckit@0.4.0
  | +-- har-validator@5.1.3
  | | +-- ajv@6.10.2
  | | | +-- fast-deep-equal@2.0.1
  | | | +-- fast-json-stable-stringify@2.1.0
  | | | +-- json-schema-traverse@0.4.1
  | | | `-- uri-js@4.2.2
  | | |   `-- punycode@2.1.1
  | | `-- har-schema@2.0.0
  | +-- http-signature@1.2.0
  | | +-- assert-plus@1.0.0
  | | +-- jsprim@1.4.1
  | | | +-- extsprintf@1.3.0
  | | | +-- json-schema@0.2.3
  | | | `-- verror@1.10.0
  | | |   `-- core-util-is@1.0.2
  | | `-- sshpk@1.16.1
  | |   +-- asn1@0.2.4
  | |   +-- bcrypt-pbkdf@1.0.2
  | |   +-- dashdash@1.14.1
  | |   +-- ecc-jsbn@0.1.2
  | |   +-- getpass@0.1.7
  | |   +-- jsbn@0.1.1
  | |   `-- tweetnacl@0.14.5
  | +-- is-typedarray@1.0.0
  | +-- isstream@0.1.2
  | +-- json-stringify-safe@5.0.1
  | +-- mime-types@2.1.25
  | | `-- mime-db@1.42.0
  | +-- oauth-sign@0.9.0
  | +-- performance-Now@2.1.0
  | +-- qs@6.5.2
  | +-- safe-buffer@5.2.0
  | +-- tough-cookie@2.4.3
  | | +-- psl@1.6.0
  | | `-- punycode@1.4.1
  | +-- tunnel-agent@0.6.0
  | `-- uuid@3.3.3
  +-- rimraf@2.7.1
  | `-- glob@7.1.6
  |   +-- fs.realpath@1.0.0
  |   +-- inflight@1.0.6
  |   | `-- wrappy@1.0.2
  |   +-- inherits@2.0.4
  |   +-- once@1.4.0
  |   `-- path-is-absolute@1.0.1
  +-- semver@5.7.1
  +-- tildify@1.2.0
  | `-- os-homedir@1.0.2
  +-- uid@0.0.2
  +-- user-home@2.0.0
  `-- validate-npm-package-name@3.0.0
    `-- builtins@1.0.3

创建一个基于 webpack 模板的新项目

# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目,安装并运行:

$  my-project
$ cnpm install
$ cnpm  dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


可以通过min-width属性来设置el-table-column的最小宽度。以下是一个示例: &lt;template&gt; &lt;el-table :data=&quot;tableData&quot;&gt; &lt;el-table-column prop=&quot;item_no&q
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重启 nodemon会监听文件变动,跟yarn dev和yarn start无关。
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如数字或字符串)或对象。当 ref 的值发生变化时,Vue 会自动更新 DOM 或任何其他使用该 ref 的响应式依赖。 使用示例: import { ref } from &#39;vue&#39;; const count = ref(0
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是发送 GET 请求时的查询参数。你可以将需要的条件作为 query 对象的属性传递进去。比如,如果你想要按照特定的条件查询信息,你可以在调用 getWK005 函数时传递这些条件。例如: getWK005({ conditio
&lt;el-form-item label=&quot;入库类型&quot; prop=&quot;mt_type&quot;&gt; &lt;el-select v-model=&quot;form.mt_type&quot; filterable placeholder=&quot;请选择&q
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需要更新你的自定义样式。 事件名和属性名变化: 某些组件的事件名和属性名发生了变化,需要检查 Element Plus 文档 以了解详细信息。 使用 setup 函数: 在 Vue 3 中,可以使用 Composition API(如 s
安装和引入方式 Element UI (Vue 2): // main.js import Vue from &#39;vue&#39;; import ElementUI from &#39;element-ui&#39;; import &#39;element-ui/lib/theme-cha
排查400 (Bad Request)和解决这个问题,可以按照以下步骤进行: 检查URL和端点:确保URL http://127.0.0.1:8008/basicApp/BS037HModel/ 是正确的,并且该端点在服务器上存在。 检查请求参数:确认发送请求时的任何参数都是正确的,包括查询参数、请
在 Vue.js 中,&lt;template&gt; 标签是一种特殊的标签,它用于定义组件的模板,但不会直接渲染为 HTML 元素。它的主要用途是在编写组件和使用插槽时提供灵活的模板定义。以下是关于 &lt;template&gt; 标签的一些关键概念和使用示例。 基本用法 组件模板:在单文件组件
el-config-provider是Element Plus库中的一个组件,用于提供全局的配置。它是Element Plus在2.0版本中引入的新组件。 el-config-provider组件的作用是允许你在应用程序中统一配置Element Plus的一些全局属性和样式,这些配置将被应用于所有E
onMounted 是一个生命周期钩子函数,在组件挂载到 DOM 后运行。在这里你可以执行需要在组件可用后进行的操作,比如获取数据、设置订阅或初始化第三方库。 使用示例: import { onMounted } from &#39;vue&#39;; onMounted(() =&gt; { //
mt_qty: (this.temp.id &amp;&amp; this.temp.mt_qty) ? this.temp.mt_qty : event.wo_wip,在这个修正后的代码中,使用了条件三元运算符来判断 this.temp.id 是否存在且 mt_qty 是否已被赋值。如果条件成立,
Axios是一个基于Promise的易用、简洁且高效的HTTP请求插件,可以用于浏览器和Node.js。首先执行yarn命令安装依赖,安装成功时在package.json文件的dependencies下多出了Axios及其版本号,笔者写此书时,安装的版本为0.26.1,如所示。 yarn add a
async 关键字用于声明一个异步函数,这个函数会返回一个 Promise 对象。与 await 关键字配合使用时,可以在异步函数中暂停代码执行,直到 Promise 解决或拒绝,从而使异步代码的处理更简单和同步化。 使用 async 的示例 下面是一个完整的 Vue 3 组件示例,展示了如何使用
Promise 是 JavaScript 中用于处理异步操作的一种对象。它代表了一个异步操作的最终完成(或失败)及其结果值。在处理异步操作时,Promise 提供了一种更干净、更可读的方式来管理回调函数。 Promise 的状态 一个 Promise 对象有三种状态: Pending(进行中):初始
在 JavaScript 中,await 是一个用于处理异步操作的关键字。它只能在 async 函数内部使用,并且用于等待一个 Promise 对象的解析。在 Vue 3 中,await 关键字常用于在组合式 API 的 setup 函数中处理异步操作,比如数据获取。 使用 await 的示例 以下
引入样式 Element UI (Vue 2): import &#39;element-ui/lib/theme-chalk/index.css&#39;; Element Plus (Vue 3): import &#39;element-plus/dist/index.css&#39;;
-D和-S区别 安装的环境不同 -D是--save-dev的简写,会安装在开发环境中(production)中的devPendencies中 -S是--save的简写,会安装在生产环境中(development)中的dependencies中
Element-plus的徽章组件el-badge Element Plus 是一个基于 Vue.js 的 UI 组件库,它提供了一系列的常用 UI 组件供开发者使用。其中,徽章组件(el-badge)是其中之一。 徽章组件(el-badge)可以在其他元素上展示一个小圆点或者一个数字,用于标记某种
vscode element-plus/lib/theme-chalk/index.css报错路径找不到 import { createApp } from &#39;vue&#39; import &#39;./style.css&#39; import App from &#39;./App.v