为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. 要同时安装 vue和 vue-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 的页面了。
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论