安装VUE.js
1、下载独立版本直接在Vue.js官网下载最新的版本。接着在项目中,引入<script src = "../vue.js"> </script> 即可,开发项目尽量使用完整版,不要使用min版。2、CDMhttps://unpkg.com/vue/dist/vue.jshttps://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue...
- 下载独立版本
直接在Vue.js官网下载最新的版本。接着在项目中,引入<script src = "../vue.js"> </script>
即可,开发项目尽量使用完整版,不要使用min版。 - CDM
https://unpkg.com/vue/dist/vue.js
https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js
- NPM
-
安装node
从官网下载并安装。 -
安装npm
安装了node也就安装了npm,此步跳过。 -
安装cnpm
cmd中输入npm install -g cnpm --registry=http://registry.npm.taobao.org
,安装完成可以用cnpm
代替npm
来安装依赖包。 -
安装vue-cli 脚手架构建工具
cmd中输入cnpm install -g vue-cli
。 -
初始化一个项目
新建一个文件夹d:\test,然后进入到test目录,输入vue init webpack myProject
,运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了。 -
安装依赖包
(1)进入项目:cd d:\test
(2)安装依赖:npm run dev
安装完成,项目目录下会有一个node_modules文件夹,里面是依赖包资源。 -
运行项目
浏览器地址栏输入:http://localhost:8080
操作日志
Microsoft Windows [版本 6.1.7601] 版权所有 © 2009 Microsoft
Corporation。保留所有权利。C:\Users\Administrator>
D:
D:>
CD TEST
D:\test>vue init webpack zhanjianVueProject ‘vue’ 不是内部或外部命令,也不是可运行的程序
或批处理文件。D:\test>
npm install vue -g
- vue@2.6.11 added 1 package from 1 contributor in 3.867s
D:\test>
npm config set prefix
"D:\Node.js_Package\node-v12.13.1-win-x64\node_glo bal"
D:\test>
npm config set cache
"D:\Node.js_Package\node-v12.13.1-win-x64\node_cache"
D:\test>
npm install -g cnpm --registry=http://registry.npm.taobao.org
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\cnpm ->
D:\Node.js_Package
node-v12.13.1-win-x64\node_global\node_modules\cnpm\bin\cnpm
- cnpm@6.1.1 added 681 packages from 938 contributors in 90.294s
D:\test>
cnpm install -g vue-cli
Downloading vue-cli to
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\node
_modules\vue-cli_tmp Copying D:\Node.js_Package\node-v12.13.1-win-x64\node_global\node_modules\vue-cl
i_tmp_vue-cli@2.9.6@vue-cli to
D:\Node.js_Package\node-v12.13.1-win-x64\node_gl
obal\node_modules\vue-cli Installing vue-cli’s dependencies to
D:\Node.js_Package\node-v12.13.1-win-x64\no
de_global\node_modules\vue-cli/node_modules [1/20] commander@^2.9.0
installed at node_modules_commander@2.20.3@commander [2/20]
consolidate@^0.14.0 installed at
node_modules_consolidate@0.14.5@consoli date [3/20] minimatch@^3.0.0
installed at node_modules_minimatch@3.0.4@minimatch [4/20]
chalk@^2.1.0 installed at node_modules_chalk@2.4.2@chalk [5/20]
multimatch@^2.1.0 installed at
node_modules_multimatch@2.1.0@multimatch [6/20] rimraf@^2.5.0 existed
at node_modules_rimraf@2.7.1@rimraf [7/20] semver@^5.1.0 installed at
node_modules_semver@5.7.1@semver [8/20] read-metadata@^1.0.0
installed at node_modules_read-metadata@1.0.0@read- metadata [9/20]
uid@0.0.2 installed at node_modules_uid@0.0.2@uid [10/20]
handlebars@^4.0.5 installed at
node_modules_handlebars@4.5.3@handlebars[11/20] tildify@^1.2.0 installed at
node_modules_tildify@1.2.0@tildify [12/20] ora@^1.3.0 installed at
node_modules_ora@1.4.0@ora [13/20] coffee-script@1.12.7 existed at
node_modules_coffee-script@1.12.7@coffe e-script [14/20]
user-home@^2.0.0 installed at node_modules_user-home@2.0.0@user-home
[15/20] metalsmith@^2.1.0 installed at
node_modules_metalsmith@2.3.0@metalsmith[16/20] validate-npm-package-name@^3.0.0 installed at
node_modules_validate-npm
-package-name@3.0.0@validate-npm-package-name [17/20] download-git-repo@^1.0.1 installed at
node_modules_download-git-repo@1.
1.0@download-git-repo [18/20] async@^2.4.0 installed at node_modules_async@2.6.3@async [19/20] request@^2.67.0 installed at
node_modules_request@2.88.0@request [20/20] inquirer@^6.0.0 installed
at node_modules_inquirer@6.5.2@inquirer deprecate metalsmith@2.3.0 ›
gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScr ipt on NPM has
moved to “coffeescript” (no hyphen) Recently updated (since
2019-12-10): 1 packages (detail see file D:\Node.js_Pack
age\node-v12.13.1-win-x64\node_global\node_modules\vue-cli\node_modules.recentl y_updates.txt) 2019-12-15
→ request@2.88.0 › har-validator@5.1.3 › ajv@6.10.2 › fast-json-stable-stri ngify@^2.0.0(2.1.0) (00:17:57) All packages
installed (239 packages installed from npm registry, used 9s(networ k
8s), speed 645.52kB/s, json 223(443.86kB), tarball 4.55MB)
[vue-cli@2.9.6] link
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\vue@ -D:\Node.js_Package\node-v12.13.1-win-x64\node_global\node_modules\vue-cli\bin
vue [vue-cli@2.9.6] link
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\vue-in it@ ->
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\node_modules\vue-cli
\bin\vue-init [vue-cli@2.9.6] link
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\vue-li st@ ->
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\node_modules\vue-cli
\bin\vue-listD:\test>
vue init webpack zhangjianVueProject
? Project name zhangjianvueproject ? Project description A Vue.js
project ? Author ZhangJianBeiJing 15369967109@163.com ? Vue build
(Use arrow keys) ? 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 runnpm install
for you after the
project has been created? (recom ? Should we runnpm install
for you
after the project has been created? (recommended) npm
vue-cli · Generated “zhangjianVueProject”.
Installing project dependencies …
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated.
Please use ht tps://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on
reading Br owserslist >3.0 config used in other tools. npm WARN
deprecated core-js@2.6.11: core-js@❤️ is no longer maintained and not
r ecommended for usage due to the number of issues. Please, upgrade
your dependenc ies to the actual version of core-js@3. npm WARN
deprecated bfj-node4@5.3.1: Switch to thebfj
package for fixes and
n ew features! npm WARN deprecated json3@3.3.2: Please use the native
JSON object instead of JS ON 3 npm WARN deprecated browserslist@1.7.7:
Browserslist 2 could fail on reading Bro wserslist >3.0 config used in
other tools. npm WARN deprecated circular-json@0.3.3: CircularJSON is
in maintenance only, fl atted is its successor. 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 npm WARN deprecated left-pad@1.3.0: use
String.prototype.padStart()chromedriver@2.46.0 install D:\test\zhangjianVueProject\node_modules\chromedri ver
node install.jsCurrent existing ChromeDriver binary is unavailable, proceding with
download and extraction. Downloading from file:
https://chromedriver.storage.googleapis.com/2.46/chromed
river_win32.zip Saving to file:
C:\Users\ADMINI~1\AppData\Local\Temp\2.46\chromedriver\chromedri
ver_win32.zip Received 781K… Received 1563K… Received 2345K…
Received 3127K… Received 3909K… Received 4523K total. Extracting
zip contents Copying to target path
D:\test\zhangjianVueProject\node_modules\chromedriver\lib
\chromedriver Done. ChromeDriver binary available at
D:\test\zhangjianVueProject\node_modules
chromedriver\lib\chromedriver\chromedriver.execore-js@2.6.11 postinstall D:\test\zhangjianVueProject\node_modules\core-js
node -e “try{require(’./postinstall’)}catch(e){}”Thank you for using core-js ( https://github.com/zloirock/core-js )
for polyfill ing JavaScript standard library!The project needs your help! Please consider supporting of core-js on
Open Colle ctive or Patreon:https://opencollective.com/core-js
https://www.patreon.com/zloirockAlso, the author of core-js ( https://github.com/zloirock ) is looking
for a goo d job -)uglifyjs-webpack-plugin@0.4.6 postinstall D:\test\zhangjianVueProject\node_mod
ules\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 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: fsevents@1.2.11
(node_modules\fs events): npm WARN notsup SKIPPING OPTIONAL
DEPENDENCY: Unsupported platform for fsevents@
1.2.11: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“win32”,“arch”:“x64” })added 1738 packages from 1098 contributors and audited 32392 packages
in 379.67sfound 92 vulnerabilities (69 low, 9 moderate, 13 high, 1 critical)
runnpm audit fix
to fix them, ornpm audit
for detailsRunning eslint --fix to comply with chosen preset rules…
========================
zhangjianvueproject@1.0.0 lint D:\test\zhangjianVueProject
eslint --ext .js,.vue src test/unit test/e2e/specs “–fix”Project initialization finished!
========================
To get started:
cd zhangjianVueProject
npm run devDocumentation can be found at
https://vuejs-templates.github.io/webpackD:\test>
cd zhangjianVueProject
D:\test\zhangjianVueProject>npm run dev
zhangjianvueproject@1.0.0 dev D:\test\zhangjianVueProject
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js10% building modules 0/1 modules 1 active … webpack/hot/dev-server
./src/main 10% building modules 1/2 modules 1 active
…ode_modules\webpack\hot\dev-server 10% building modules 2/3
modules 1 active …client\index.js?http://localhost:8 10% building
modules 2/4 modules 2 active …\test\zhangjianVueProject\src\main
10% building modules 2/5 modules 3 active
…oject\node_modules\webpack\hot\log 10% building modules 2/6
modules 4 active …t\node_modules\webpack\hot\emitter 10% building
modules 2/7 modules 5 active …dules\webpack\hot\log-apply-result
10% building modules 3/7 modules 4 active
…dules\webpack\hot\log-apply-result 10% building modules 4/7
modules 3 active …dules\webpack\hot\log-apply-result 10% building
modules 5/7 modules 2 active …dules\webpack\hot\log-apply-result
10% building modules 6/7 modules 1 active
…dules\webpack\hot\log-apply-result 10% building modules 7/8
modules 1 active …\webpack\hot nonrecursive /^./lo 10% building
modules 7/9 modules 2 active …s\webpack-dev-server\client\socket
10% building modules 7/10 modules 3 active
…\webpack-dev-server\client\overla 10% building modules 8/10
modules 2 active …\webpack-dev-server\client\overla 10% building
modules 8/11 modules 3 active …ianVueProject\node_modules\url\ur
10% building modules 8/12 modules 4 active
…Project\node_modules\events\event 11% building modules 9/12
modules 3 active …Project\node_modules\events\event 11% building
modules 10/12 modules 2 active …Project\node_modules\events\even
11% building modules 10/13 modules 3 active
…ject\node_modules\vue\dist\vue.e 11% building modules 11/13
modules 2 active …ject\node_modules\vue\dist\vue.e 11% building
modules 12/13 modules 1 active …ject\node_modules\vue\dist\vue.e
11% building modules 13/14 modules 1 active
…ode_modules\webpack\buildin\glob 11% building modules 14/15
modules 1 active …angjianVueProject\src\router\ind 11% building
modules 14/16 modules 2 active …anVueProject\node_modules\url\ut
11% building modules 14/17 modules 3 active
…ject\node_modules\strip-ansi\ind 11% building modules 14/18
modules 4 active …node_modules\loglevel\lib\loglev 11% building
modules 14/19 modules 5 active …node_modules\querystring-es3\ind
11% building modules 14/20 modules 6 active
…ser\node_modules\punycode\punyco 11% building modules 15/20
modules 5 active …ser\node_modules\punycode\punyco 11% building
modules 15/21 modules 6 active …_modules\sockjs-client\dist\sock
11% building modules 16/21 modules 5 active
…_modules\sockjs-client\dist\sock 12% building modules 17/21
modules 4 active …_modules\sockjs-client\dist\sock 12% building
modules 18/21 modules 3 active …_modules\sockjs-client\dist\sock
12% building modules 18/22 modules 4 active
…\test\zhangjianVueProject\src\Ap 12% building modules 19/22
modules 3 active …\test\zhangjianVueProject\src\Ap 12% building
modules 20/22 modules 2 active …\test\zhangjianVueProject\src\Ap
12% building modules 20/23 modules 3 active
…ode_modules\webpack\buildin\modu 12% building modules 21/23
modules 2 active …\test\zhangjianVueProject\src\Ap 12% building
modules 22/23 modules 1 active …\test\zhangjianVueProject\src\Ap
12% building modules 22/24 modules 2 active
…oject\node_modules\ansi-html\ind 12% building modules 23/24
modules 1 active …oject\node_modules\ansi-html\ind 12% building
modules 23/25 modules 2 active …t\node_modules\html-entities\ind
12% building modules 23/26 modules 3 active
…ode_modules\querystring-es3\deco 12% building modules 23/27
modules 4 active …ode_modules\querystring-es3\enco 12% building
modules 23/28 modules 5 active …Project\src\components\HelloWorl
12% building modules 24/28 modules 4 active
…Project\src\components\HelloWorl 13% building modules 25/28
modules 3 active …Project\src\components\HelloWorl 13% building
modules 25/29 modules 4 active …\test\zhangjianVueProject\src\Ap
13% building modules 26/29 modules 3 active
…Project\src\components\HelloWorl 13% building modules 26/30
modules 4 active …ue-loader\lib\component-normaliz 13% building
modules 27/30 modules 3 active …ue-loader\lib\component-normaliz
13% building modules 28/30 modules 2 active
…ue-loader\lib\component-normaliz 13% building modules 28/31
modules 3 active …\test\zhangjianVueProject\src\Ap p.vue{ parser:
“babylon” } is deprecated; we now treat it as { parser: “babel” } .
13% building modules 29/31 modules 2 active
…ue-loader\lib\component-normaliz 13% building modules 30/31
modules 1 active …ue-loader\lib\component-normaliz 13% building
modules 30/32 modules 2 active …Project\src\components\HelloWorl
13% building modules 30/33 modules 3 active
…Project\src\components\HelloWorl 13% building modules 31/33
modules 2 active …Project\src\components\HelloWorl 13% building
modules 32/33 modules 1 active …ue-loader\lib\component-normaliz
13% building modules 32/34 modules 2 active
…les\html-entities\lib\xml-entiti 13% building modules 32/35
modules 3 active …s\html-entities\lib\html4-entiti 13% building
modules 32/36 modules 4 active …s\html-entities\lib\html5-entiti
13% building modules 33/36 modules 3 active
…s\html-entities\lib\html5-entiti 13% building modules 33/37
modules 4 active …les\vue-router\dist\vue-router.e 13% building
modules 33/38 modules 5 active …ject\node_modules\ansi-regex\ind
14% building modules 34/38 modules 4 active
…ject\node_modules\ansi-regex\ind 14% building modules 35/38
modules 3 active …ject\node_modules\ansi-regex\ind 14% building
modules 36/38 modules 2 active …ject\node_modules\ansi-regex\ind
14% building modules 37/38 modules 1 active
…ject\node_modules\ansi-regex\ind 14% building modules 37/39
modules 2 active …\test\zhangjianVueProject\src\Ap 14% building
modules 38/39 modules 1 active …ject\node_modules\ansi-regex\ind
14% building modules 38/40 modules 2 active
…Project\src\components\HelloWorl 14% building modules 39/40
modules 1 active …ject\node_modules\ansi-regex\ind 14% building
modules 39/41 modules 2 active …\test\zhangjianVueProject\src\Ap
14% building modules 39/42 modules 3 active
…Project\src\components\HelloWorl 14% building modules 39/43
modules 4 active …ules\vue-hot-reload-api\dist\ind 14% building
modules 40/43 modules 3 active …ules\vue-hot-reload-api\dist\ind
14% building modules 40/44 modules 4 active
…e-style-loader\lib\addStylesClie 14% building modules 41/44
modules 3 active …e-style-loader\lib\addStylesClie 15% building
modules 42/44 modules 2 active …Project\src\components\HelloWorl
15% building modules 42/45 modules 3 active
…angjianVueProject\src\assets\log 15% building modules 42/46
modules 4 active …\vue-style-loader\lib\listToStyl 15% building
modules 43/46 modules 3 active …\vue-style-loader\lib\listToStyl
15% building modules 44/46 modules 2 active
…\vue-style-loader\lib\listToStyl 15% building modules 45/46
modules 1 active …\vue-style-loader\lib\listToStyl 15% building
modules 46/47 modules 1 active …de_modules\css-loader\lib\css-ba
95% emittingDONE Compiled successfully in 4040ms
18:55:34I Your application is running here: http://localhost:8080
更多推荐
所有评论(0)