vue学习过程记录(1)

本文记录了在Windows环境下,从检查Node.js和npm,到安装Vue.js及相关脚手架,最后创建Vue项目的详细步骤。包括使用npm安装webpack、webpack-cli、vue以及vue-cli,初始化Vue项目并解决依赖问题。

下面指令测试电脑有木有node, npm ,vue

C:\Users>node -v

v8.11.2

 

C:\Users>npm -v

5.6.0

 

C:\Users>npm -V

 

Usage: npm <command>

 

where <command> is one of:

    access, adduser, bin, bugs, c, cache, completion, config,

    ddp, dedupe, deprecate, dist-tag, docs, doctor, edit,

    explore, get, help, help-search, i, init, install,

    install-test, it, link, list, ln, login, logout, ls,

    outdated, owner, pack, ping, prefix, profile, prune,

    publish, rb, rebuild, repo, restart, root, run, run-script,

    s, se, search, set, shrinkwrap, star, stars, start, stop, t,

    team, test, token, tst, un, uninstall, unpublish, unstar,

    up, update, v, version, view, whoami

 

npm <command> -h     quick help on <command>

npm -l           display full usage info

npm help <term>  search for help on <term>

npm help npm     involved overview

 

Specify configs in the ini-formatted file:

    C:\Users\EDZ\.npmrc

or on the command line via: npm <command> --key value

Config info can be viewed via: npm help config

 

npm@5.6.0 C:\Program Files\nodejs\node_modules\npm

下面指令是安装vue脚手架

C:\>    npm install -g webpack

d:\npm\node_global\webpack -> d:\npm\node_global\node_modules\webpack\bin\webpack.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\webpack\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

 

+ webpack@4.12.0

added 1 package and updated 4 packages in 27.276s

C:\>npm install -g webpack-cli

d:\npm\node_global\webpack-cli -> d:\npm\node_global\node_modules\webpack-cli\bin\cli.js

npm WARN webpack-cli@3.0.8 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.

 

+ webpack-cli@3.0.8

added 105 packages in 11.328s

 

C:\>npm install -g vue

+ vue@2.5.16

updated 1 package in 1.207s

 

C:\>npm install -g vue-cli

npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)

d:\npm\node_global\vue-init -> d:\npm\node_global\node_modules\vue-cli\bin\vue-init

d:\npm\node_global\vue -> d:\npm\node_global\node_modules\vue-cli\bin\vue

d:\npm\node_global\vue-list -> d:\npm\node_global\node_modules\vue-cli\bin\vue-list

+ vue-cli@2.9.6

added 252 packages in 20.348s

 

C:\>vue -v

 

  error: unknown option `-v'

 

 

C:\>vue -V

2.9.6

下面是我进到D盘我VS自己建的工作区 

C:\>D:

D:\>   cd D:\VScode_workpace\Test

 

 

下面是在d盘VScode_workpace文件下创建名为 itrip1的vue项目

 

D:\VScode_workpace\Test>  vue init webpack itrip1

 

? Project name itrip1

? Project description A Vue.js project

? Author

? Vue build standalone(选第一个)

? Install vue-router? Yes

? Use ESLint to lint your code? No

? Set up unit tests No

? Setup e2e tests with Nightwatch? No

? Should we run `npm install` for you after the project has been created? (recommended) npm

 

   vue-cli · Generated "itrip1".

 

 出现以下一大段代码就代表成功了

# Installing project dependencies ...

# ========================

 

 

> uglifyjs-webpack-plugin@0.4.6 postinstall D:\VScode_workpace\Test\itrip1\node_modules\webpack\node_modules\uglifyjs-webpack-plugin

> node lib/post_install.js

 

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

 

added 1118 packages in 31.332s

 

# Project initialization finished!

# ========================

 

To get started:

 

  cd itrip1

  npm run dev

 

Documentation can be found at https://vuejs-templates.github.io/webpack

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值