搭建Vue.js开发环境

127 阅读 0 评论 84 点赞

我是靠谱客的博主疯狂可乐，最近开发中收集的这篇文章主要介绍搭建Vue.js开发环境，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第一步，安装node.js，因为vue的运行是要依赖于node的npm的管理工具来实现的，官网下载，最好安装在系统盘之外的盘中。安装完成后，将安装路径加到环境变量PATH中。

第二步，在node.js的安装目录下创建两个文件夹，node_cache和node_global，然后命令行设置：设置缓存文件夹和设置全局模块存放路径。

设置完之后，会在用户目录下生成一个文件，.npmrc，如果再次执行命令，就会报错：

D:nodejs>npm config set prefix 'D:nodejsnode_global'
Error: EINVAL: invalid argument, mkdir 'D:nodejs'D:nodejsnode_global'
TypeError: Cannot read property 'loaded' of undefined
at exit (D:nodejsnode_modulesnpmlibutilserror-handler.js:97:27)
at errorHandler (D:nodejsnode_modulesnpmlibutilserror-handler.js:215:3)
at D:nodejsnode_modulesnpmbinnpm-cli.js:77:20
at cb (D:nodejsnode_modulesnpmlibnpm.js:225:22)
at D:nodejsnode_modulesnpmlibnpm.js:263:24
at D:nodejsnode_modulesnpmlibconfigcore.js:83:7
at Array.forEach (<anonymous>)
at D:nodejsnode_modulesnpmlibconfigcore.js:82:13
at f (D:nodejsnode_modulesnpmnode_modulesonceonce.js:25:25)
at afterExtras (D:nodejsnode_modulesnpmlibconfigcore.js:173:20)
D:nodejsnode_modulesnpmlibutilserror-handler.js:97
var doExit = npm.config.loaded ? npm.config.get('_exit') : true
^

TypeError: Cannot read property 'loaded' of undefined
at exit (D:nodejsnode_modules[4mnpm[24mlibutilserror-handler.js:97:27)
at process.errorHandler (D:nodejsnode_modules[4mnpm[24mlibutilserror-h
[90m at process.emit (events.js:209:13)[39m
[90m at process._fatalException (internal/process/execution.js:150:25)[39m
Error: EINVAL: invalid argument, mkdir 'D:nodejs'D:nodejsnode_global'
TypeError: Cannot read property 'loaded' of undefined
at exit (D:nodejsnode_modulesnpmlibutilserror-handler.js:97:27)
at errorHandler (D:nodejsnode_modulesnpmlibutilserror-handler.js:215:3)
at D:nodejsnode_modulesnpmbinnpm-cli.js:77:20
at cb (D:nodejsnode_modulesnpmlibnpm.js:225:22)
at D:nodejsnode_modulesnpmlibnpm.js:263:24
at D:nodejsnode_modulesnpmlibconfigcore.js:83:7
at Array.forEach (<anonymous>)
at D:nodejsnode_modulesnpmlibconfigcore.js:82:13
at f (D:nodejsnode_modulesnpmnode_modulesonceonce.js:25:25)
at afterExtras (D:nodejsnode_modulesnpmlibconfigcore.js:173:20)
D:nodejsnode_modulesnpmlibutilserror-handler.js:97
var doExit = npm.config.loaded ? npm.config.get('_exit') : true
^

此时，可以选择手动修改文件，也可删除文件，再次执行命令。

如果执行npm命令没有反应，也是要修改这个文件，最好手动修改！！！！！

第三步，由于在国内使用npm非常慢，所以在这里我们推荐使用淘宝npm镜像，使用

淘宝的cnpm命令管理工具可以代替默认的npm管理工具：

npm install -g cnpm --registry=https://registry.npm.taobao.org

最后安装在了node_global文件夹下。

第四步，设置环境变量，为了方便使用cnpm工具。一是在path中添加node_global文件夹，二是新建NODE_PATH变量，设置为node_modules所在路径。

第五步，安装vue，cnpm install vue -g

第六步，安装vue命令行工具，

cnpm install vue-cli -g

D:nodejsnode_global>cnpm install vue-cli -g
Downloading vue-cli to D:nodejsnode_globalnode_modulesvue-cli_tmp
Copying D:nodejsnode_globalnode_modulesvue-cli_tmp_vue-cli@2.9.6@vue-cli to D:nodejsnode_globalnode_modulesvue-cli
Installing vue-cli's dependencies to D:nodejsnode_globalnode_modulesvue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules_commander@2.20.0@commander
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
[2/20] consolidate@^0.14.0 installed at node_modules_consolidate@0.14.5@consolidate
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
[3/20] minimatch@^3.0.0 installed at node_modules_minimatch@3.0.4@minimatch
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
[4/20] multimatch@^2.1.0 installed at node_modules_multimatch@2.1.0@multimatch
[5/20] handlebars@^4.0.5 installed at node_modules_handlebars@4.1.2@handlebars
[6/20] chalk@^2.1.0 installed at node_modules_chalk@2.4.2@chalk
[7/20] rimraf@^2.5.0 existed at node_modules_rimraf@2.7.1@rimraf
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
[8/20] read-metadata@^1.0.0 installed at node_modules_read-metadata@1.0.0@read-metadata
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
[9/20] async@^2.4.0 installed at node_modules_async@2.6.3@async
[10/20] ora@^1.3.0 installed at node_modules_ora@1.4.0@ora
[11/20] semver@^5.1.0 installed at node_modules_semver@5.7.1@semver
[12/20] coffee-script@1.12.7 existed at node_modules_coffee-script@1.12.7@coffee-script
[13/20] metalsmith@^2.1.0 installed at node_modules_metalsmith@2.3.0@metalsmith
[14/20] uid@0.0.2 installed at node_modules_uid@0.0.2@uid
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
[15/20] tildify@^1.2.0 installed at node_modules_tildify@1.2.0@tildify
[16/20] user-home@^2.0.0 installed at node_modules_user-home@2.0.0@user-home
(node:13220) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. U
se emitter.setMaxListeners() to increase limit
[17/20] validate-npm-package-name@^3.0.0 installed at node_modules_validate-npm-package-name@3.0.0@validate-npm-package-name
[18/20] request@^2.67.0 installed at node_modules_request@2.88.0@request
[19/20] download-git-repo@^1.0.1 installed at node_modules_download-git-repo@1.1.0@download-git-repo
[20/20] inquirer@^6.0.0 installed at node_modules_inquirer@6.5.1@inquirer
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphe
n)
Recently updated (since 2019-08-14): 2 packages (detail see file D:nodejsnode_globalnode_modulesvue-clinode_modules.recent
ly_updates.txt)
  2019-08-19
    → request@2.88.0 › uuid@^3.3.2(3.3.3) (21:26:25)
  2019-08-15
    → metalsmith@2.3.0 › rimraf@^2.2.8(2.7.1) (00:53:32)
All packages installed (243 packages installed from npm registry, used 3s(network 3s), speed 1.67MB/s, json 225(429.99kB), tarba
ll 4.74MB)
[vue-cli@2.9.6] link D:nodejsnode_globalvue@ -> D:nodejsnode_globalnode_modulesvue-clibinvue
[vue-cli@2.9.6] link D:nodejsnode_globalvue-init@ -> D:nodejsnode_globalnode_modulesvue-clibinvue-init
[vue-cli@2.9.6] link D:nodejsnode_globalvue-list@ -> D:nodejsnode_globalnode_modulesvue-clibinvue-list

第七步，根据模板创建新项目，在vue的工程空间文件夹下执行vue init webpack mytest

（1）执行命令后可能会出现乱码：

解决办法为：打开cmd,在控制台输入CHCP 65001，按回车键即可将编码格式设成utf-8，再创建就不会乱码了。

（2）报错 npm ERR! Unexpected end of JSON input while parsing near '...",'

执行 npm cache clean --force

D:vueProject>vue init webpack mytest

D:vueProject>"node"  "D:nodejsnode_global\node_modulesvue-clibinvue" init webpack-simple mytest

? Project name mytest
? Project description A Vue.js project
? Author
? License MIT
? Use sass? Yes

   vue-cli · Generated "mytest".

   To get started:

     cd mytest
     npm install
     npm run dev

然后，依次执行 cd mytest, npm install ,npm run dev，

D:vueProjectmytest>npm run dev

> mytest@1.0.0 dev D:vueProjectmytest
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

自动打开链接 http://localhost:8080/：