如何安装vue并创建vue.js框架项目

1、安装vue工具

C:\Users\Administrator.USER-0GUONPPBHK>$ cnpm install vue
'$' 不是内部或外部命令，也不是可运行的程序
或批处理文件。C:\Users\Administrator.USER-0GUONPPBHK>cnpm install vue
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 934ms, s
peed 1010.57kB/s, json 1(278.91kB), tarball 664.97kB)

2、安装vue-cli

C:\Users\Administrator.USER-0GUONPPBHK>cnpm install --global vue-cli
Downloading vue-cli to C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\np
m\node_modules\vue-cli_tmp
Copying C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_modules\
vue-cli_tmp\_vue-cli@2.9.3@vue-cli to C:\Users\Administrator.USER-0GUONPPBHK\App
Data\Roaming\npm\node_modules\vue-cli
Installing vue-cli's dependencies to C:\Users\Administrator.USER-0GUONPPBHK\AppD
ata\Roaming\npm\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.15.1@commander
[2/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[3/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[4/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.6.2@rimraf
[6/20] chalk@^2.1.0 installed at node_modules\_chalk@2.3.2@chalk
[7/20] semver@^5.1.0 installed at node_modules\_semver@5.5.0@semver
[8/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consoli
date
[9/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[10/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[11/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read
-metadata
[13/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffe
e-script
[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm
-package-name@3.0.0@validate-npm-package-name
[15/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith[16/20] request@^2.67.0 installed at node_modules\_request@2.85.0@request
[17/20] async@^2.4.0 installed at node_modules\_async@2.6.0@async
[18/20] inquirer@^3.3.0 installed at node_modules\_inquirer@3.3.0@inquirer
[19/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.
0.2@download-git-repo
[20/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.0.11@handlebar
s
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeS
cript on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2018-03-17): 6 packages (detail see file C:\Users\Admini
strator.USER-0GUONPPBHK\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.r
ecently_updates.txt)Today:→ download-git-repo@1.0.2 › download@5.0.3 › decompress@4.2.0 › decompre
ss-tarbz2@4.1.1 › unbzip2-stream@1.2.5 › buffer@3.6.0 › ieee754@^1.1.4(1.1.11
) (15:26:34)2018-03-23→ download-git-repo@1.0.2 › download@5.0.3 › filenamify@2.0.0 › strip-ou
ter@^1.0.0(1.0.1) (13:41:37)→ download-git-repo@1.0.2 › download@5.0.3 › got@6.7.1 › lowercase-keys@
^1.0.0(1.0.1) (15:52:08)2018-03-22→ metalsmith@2.3.0 › clone@^1.0.2(1.0.4) (05:21:25)→ download-git-repo@1.0.2 › download@5.0.3 › decompress@4.2.0 › decompre
ss-tar@4.1.1 › tar-stream@1.5.5 › bl@^1.0.0(1.2.2) (05:59:58)2018-03-20→ commander@^2.9.0(2.15.1) (09:47:22)
All packages installed (252 packages installed from npm registry, used 4s, speed1.8MB/s, json 235(2.46MB), tarball 4.45MB)
[vue-cli@2.9.3] link C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\
vue@ -> C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_modules\
vue-cli\bin\vue
[vue-cli@2.9.3] link C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\
vue-init@ -> C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_mod
ules\vue-cli\bin\vue-init
[vue-cli@2.9.3] link C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\
vue-list@ -> C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_mod
ules\vue-cli\bin\vue-list

3、初始化vue并创建项目

C:\Users\Administrator.USER-0GUONPPBHK>vue init webpack vuecmp? Project name vuecmp
? Project description A Vue.js project
? Author [youhai]
? 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? (reco
mmended) npmvue-cli · Generated "vuecmp".# Installing project dependencies ...
# ========================npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at leas
t 2.1.6 to avoid a serious bug with socket data flow and an import issue introdu
ced in 2.1.0> chromedriver@2.37.0 install C:\Users\Administrator.USER-0GUONPPBHK\vuecmp\node
_modules\chromedriver
> node install.jsDownloading https://chromedriver.storage.googleapis.com/2.37/chromedriver_win32.
zip
Saving to C:\Users\ADMINI~1.USE\AppData\Local\Temp\chromedriver\chromedriver_win
32.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3270K total.
Extracting zip contents
Copying to target path C:\Users\Administrator.USER-0GUONPPBHK\vuecmp\node_module
s\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\Users\Administrator.USER-0GUONPPBHK\vu
ecmp\node_modules\chromedriver\lib\chromedriver\chromedriver.exe> uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\Administrator.USER-0GUONPPB
HK\vuecmp\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.jsnpm notice created a lockfile as package-lock.json. You should commit this file.npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)added 1549 packages in 211.183sRunning eslint --fix to comply with chosen preset rules...
# ========================> vuecmp@1.0.0 lint C:\Users\Administrator.USER-0GUONPPBHK\vuecmp
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"# Project initialization finished!
# ========================To get started:cd vuecmpnpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

4、切换项目路径

C:\Users\Administrator.USER-0GUONPPBHK>cd vuecmp

5、项目安装

C:\Users\Administrator.USER-0GUONPPBHK\vuecmp>cnpm install
√ Installed 58 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 25ms, speed 0B/s, json 0(0B), tarball 0B)

6、项目编译

C:\Users\Administrator.USER-0GUONPPBHK\vuecmp>cnpm run dev> vuecmp@1.0.0 dev C:\Users\Administrator.USER-0GUONPPBHK\vuecmp
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src/main10% building modules 1/2 modules 1 active ...ode_modules\webpack\hot\dev-server10% building modules 2/3 modules 1 active ...client\index.js?http://localhost:810% building modules 2/4 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\main10% building modules 2/5 modules 3 active ...uecmp\node_modules\webpack\hot\log10% building modules 2/6 modules 4 active ...dules\webpack\hot\log-apply-result10% building modules 2/7 modules 5 active ...p\node_modules\webpack\hot\emitter10% building modules 3/7 modules 4 active ...p\node_modules\webpack\hot\emitter10% building modules 4/7 modules 3 active ...p\node_modules\webpack\hot\emitter10% building modules 5/7 modules 2 active ...p\node_modules\webpack\hot\emitter10% building modules 6/7 modules 1 active ...p\node_modules\webpack\hot\emitter10% building modules 7/8 modules 1 active ...\webpack\hot nonrecursive /^\.\/lo10% building modules 7/9 modules 2 active ...\webpack-dev-server\client\overlay10% building modules 7/10 modules 3 active ...s\webpack-dev-server\client\socke10% building modules 8/10 modules 2 active ...s\webpack-dev-server\client\socke10% building modules 8/11 modules 3 active ...NPPBHK\vuecmp\node_modules\url\ur11% building modules 9/11 modules 2 active ...NPPBHK\vuecmp\node_modules\url\ur11% building modules 10/11 modules 1 active ...NPPBHK\vuecmp\node_modules\url\u11% building modules 10/12 modules 2 active ...ecmp\node_modules\vue\dist\vue.e11% building modules 10/13 modules 3 active ...\vuecmp\node_modules\events\even11% building modules 11/13 modules 2 active ...\vuecmp\node_modules\events\even11% building modules 12/13 modules 1 active ...\vuecmp\node_modules\events\even11% building modules 12/14 modules 2 active ...ode_modules\webpack\buildin\glob11% building modules 13/14 modules 1 active ...\vuecmp\node_modules\events\even11% building modules 14/15 modules 1 active ...0GUONPPBHK\vuecmp\src\router\ind11% building modules 14/16 modules 2 active ...PPBHK\vuecmp\node_modules\url\ut11% building modules 14/17 modules 3 active ...ecmp\node_modules\strip-ansi\ind11% building modules 14/18 modules 4 active ...node_modules\querystring-es3\ind11% building modules 14/19 modules 5 active ...cmp\node_modules\punycode\punyco11% building modules 14/20 modules 6 active ...node_modules\loglevel\lib\loglev11% building modules 15/20 modules 5 active ...node_modules\loglevel\lib\loglev11% building modules 16/20 modules 4 active ...node_modules\loglevel\lib\loglev11% building modules 16/21 modules 5 active ..._modules\sockjs-client\dist\sock12% building modules 17/21 modules 4 active ..._modules\sockjs-client\dist\sock12% building modules 17/22 modules 5 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap12% building modules 18/22 modules 4 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap12% building modules 18/23 modules 5 active ...ode_modules\webpack\buildin\modu12% building modules 19/23 modules 4 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap12% building modules 20/23 modules 3 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap12% building modules 21/23 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap12% building modules 21/24 modules 3 active ...uecmp\node_modules\ansi-html\ind12% building modules 22/24 modules 2 active ...uecmp\node_modules\ansi-html\ind12% building modules 23/24 modules 1 active ...uecmp\node_modules\ansi-html\ind12% building modules 23/25 modules 2 active ...p\node_modules\html-entities\ind12% building modules 23/26 modules 3 active ...ode_modules\querystring-es3\deco12% building modules 23/27 modules 4 active ...ode_modules\querystring-es3\enco12% building modules 23/28 modules 5 active ...\vuecmp\src\components\HelloWorl12% building modules 24/28 modules 4 active ...\vuecmp\src\components\HelloWorl13% building modules 25/28 modules 3 active ...\vuecmp\src\components\HelloWorl13% building modules 26/28 modules 2 active ...\vuecmp\src\components\HelloWorl13% building modules 27/28 modules 1 active ...\vuecmp\src\components\HelloWorl13% building modules 27/29 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap13% building modules 28/29 modules 1 active ...\vuecmp\src\components\HelloWorl13% building modules 28/30 modules 2 active ...ue-loader\lib\component-normaliz13% building modules 28/31 modules 3 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap13% building modules 29/31 modules 2 active ...ue-loader\lib\component-normaliz13% building modules 30/31 modules 1 active ...ue-loader\lib\component-normaliz13% building modules 30/32 modules 2 active ...\vuecmp\src\components\HelloWorl13% building modules 30/33 modules 3 active ...\vuecmp\src\components\HelloWorl13% building modules 31/33 modules 2 active ...\vuecmp\src\components\HelloWorl13% building modules 32/33 modules 1 active ...ue-loader\lib\component-normaliz13% building modules 32/34 modules 2 active ...les\html-entities\lib\xml-entiti13% building modules 32/35 modules 3 active ...s\html-entities\lib\html4-entiti13% building modules 32/36 modules 4 active ...s\html-entities\lib\html5-entiti13% building modules 33/36 modules 3 active ...s\html-entities\lib\html5-entiti13% building modules 33/37 modules 4 active ...les\vue-router\dist\vue-router.e14% building modules 34/37 modules 3 active ...les\vue-router\dist\vue-router.e14% building modules 35/37 modules 2 active ...les\vue-router\dist\vue-router.e14% building modules 36/37 modules 1 active ...les\vue-router\dist\vue-router.e14% building modules 36/38 modules 2 active ...ecmp\node_modules\ansi-regex\ind14% building modules 37/38 modules 1 active ...ecmp\node_modules\ansi-regex\ind14% building modules 37/39 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap14% building modules 38/39 modules 1 active ...ecmp\node_modules\ansi-regex\ind14% building modules 38/40 modules 2 active ...\vuecmp\src\components\HelloWorl14% building modules 39/40 modules 1 active ...ecmp\node_modules\ansi-regex\ind14% building modules 39/41 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap14% building modules 39/42 modules 3 active ...\vuecmp\src\components\HelloWorl14% building modules 39/43 modules 4 active ...ules\vue-hot-reload-api\dist\ind14% building modules 40/43 modules 3 active ...ules\vue-hot-reload-api\dist\ind14% building modules 40/44 modules 4 active ...e-style-loader\lib\addStylesClie14% building modules 41/44 modules 3 active ...e-style-loader\lib\addStylesClie15% building modules 42/44 modules 2 active ...\vuecmp\src\components\HelloWorl15% building modules 42/45 modules 3 active ...0GUONPPBHK\vuecmp\src\assets\log15% building modules 43/45 modules 2 active ...\vuecmp\src\components\HelloWorl15% building modules 44/45 modules 1 active ...\vuecmp\src\components\HelloWorl15% building modules 45/46 modules 1 active ...\vue-style-loader\lib\listToStyl15% building modules 46/47 modules 1 active ...de_modules\css-loader\lib\css-ba95% emittingDONE  Compiled successfully in 3566ms                                  18:07:43I  Your application is running here: http://localhost:8081

7、查看项目结构

如何安装vue并创建vue.js框架项目相关推荐

VS Code安装VUE及创建VUE项目
VS Code安装VUE及创建VUE项目一.在搭建vue的开发环境之前,先下载node.js,vue的运行是要依赖于node的npm管理工具来实现,下载地址:http://nodejs.cn 二.n ...
使用Vue cli创建Vue项目
使用Vue cli创建Vue项目第一步:安装node.js 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装 ...
使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
Vue vscode 创建 vue 项目流程【超详细】
文章目录一.安装node 二.配置淘宝镜像三.配置 vscode(win10) 四.全局安装脚手架五.创建项目六.进入项目七.项目结构一.安装node 请在官网下载安装:https://n ...
第一个vue案例创建vue实例化对象
Vue的使用 1.先导入vue.js <script src="vue.js"></script> 2.创建vue实例化对象 < ...
Sencha Cmd创建Ext JS示例项目
Sencha提供了免费的Cmd工具,可以用来创建Ext JS项目并提供了一些便利的功能. Sencha也在官方文档中提供了一个示例来演示如何创建一个Sample Login App. 本文就介绍一下这 ...
使用vue ui创建vue项目(基于图形化界面的方式)
前提: 1.打开cmd ,安装vue脚手架 npm install -g @vue/cli 2.若之前安装过无需重新安装:直接在cmd 中输入vue ui 若输入vue ui 后无反应,则是安装的脚手 ...
创建Node.js Express 项目
打开WebStorm 选择创建新项目点击Create 后,会使用Express-generator 自动创建项目. 创建过程中会出现选择Node.js 源码压缩包网络会下载比较慢.我已经下载 ...
1. Windows 10 - Node与Vue - 安装 Vue 2.x 及 3.x 框架 - 项目创建要点
目录前言一.vue 简介: 1.npm简介 2.cnpm 简介二.设置node的全局和缓存路径手动创建node.js的全局和缓存路径目录 Windows命令行配置node.js的全局和缓存路径 ...
Mac电脑使用webstorm安装vue并创建项目
配置环境检查node.js 以及npm包管理工具是否安装完成操作步骤 node.js 的官网下载安装包 https://nodejs.org/zh-cn/ 一路执行下一步即可.记住安装的位置创建 ...

如何安装vue并创建vue.js框架项目

如何安装vue并创建vue.js框架项目相关推荐

最新文章

热门文章