主页

为vue搭建环境(安装nvm,node)

2023-10-14 09:07AM

参考:http://vue_book.siwei.me/preparation.html

一. 安装 nvm

1. 下载:

git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

2. 启动时加载:

在 ~/.bashrc 文件、~/.bash_profile 文件、或者 ~/.zshrc 文件中,增加下面这行代码

source ~/.nvm/nvm.sh

3. 运行文件:

我把代码增加在了 ~/.bashrc 文件,所以运行这个文件

$ source ~/.bashrc 

4. 使用:

1)列出所有可以安装的版本: 

$ nvm list-remote

2)列出本地安装好了的版本: 

$ nvm list

3)安装:

$ nvm install v0.10.37 

4)使用:

在 ~/.bashrc 文件中增加下面这一行代码:

$ nvm alias default 0.10.37  

5. 删除:

直接手动删掉对应的配置文件:~/.nvm, ~/.npm ~/.bower 即可

 二. 安装 node

1. 通过 nvm 安装 node

安装好 nvm 后, 就可以安装node了。

$ nvm install v6.9.1

如果已经安装过了nvm, 可以直接切换版本:

$ nvm use 6.9.1

nvm 国内安装速度太慢的办法

使用下面的命令,就可以在国内下载node了。

$ NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/dist nvm install

 2. 用cnpm代替 npm 命令。

1)npm 是 node package manager.

考虑到国内安装太慢,我们一般使用国内的镜像。

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

或者:直接通过添加 npm 参数 alias 一个新命令

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

2)然后,就可以通过国内(淘宝服务器)来安装node的包了:

$ cnpm install vue-cli -g

 三. 安装 git

ubuntu下可以直接:

$ apt-get install git

四. 安装 vuejs

1. 要同时安装 vuevue-cli这两个node package.

-g 表示给他们安装成全局可以使用的包。

$ cnpm install vue vue-cli -g

然后,尝试运行 vue,查看是否可以成功运行。

如果提示找不到 cnpm, 需要先安装 cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs

added 440 packages in 45s

28 packages are looking for funding
  run `npm fund` for details

也可以使用 $ npm install vue vue-cli -g 来安装 vuejs

$ npm install vue vue-cli -g
npm WARN deprecated consolidate@0.14.5: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli

added 253 packages in 12s

五. 试运行 vue

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

$ vue init webpack my-project

安装依赖, :

$ cd my-project
$ cnpm install

 在本地默认端口运行:

$ npm run dev

然后就可以看到在本地已经运行起来了

$ npm run dev

> my-project@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

(node:724655) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
 12% building modules 24/28 modules 4 active ...eiyi/workspace/my-project/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                        

 DONE  Compiled successfully in 2840ms                                                                                                                                                                   2:51:34 PM

 I  Your application is running here: http://localhost:8080 

然后在浏览器打开  http://localhost:8080 就可以看到 vue 的页面了。

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论