Vue的学习-环境搭建

一.vue开发环境的安装

1.安装Home-brew(Mac自有的程序包管理工具)

1)打开终端运行一下命令安装Homebrew:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

如果出现以下错误提示:curl: (7) Failed to connect to raw.githubusercontent.com port 443: Operation

可能是网络状态不允许:通过访问“https://raw.githubusercontent.com/Homebrew/install/master/install”网页是否正常显示,无法访问,不断切换网络直到页面可正常显示后,再执行上一步的命令行。

2)安装成功后,查看一下brew的版本信息:

brew -v

3)版本信息未显示出现一下提示“-bash: brew: command not found

参看:https://blog.csdn.net/li396864285/article/details/52572163 

安装nvm

brew install nvm

出现下图表示安装完成

按照提示 继续操作

You should create NVM's working directory if it doesn't exist:

你应该检查nvm的工作空间是否存在 不存在就创建

检查工作目录是否存在

cd ~   // 这个命令在终端任意路径可用 意思是进入到当前用户的跟路径

ls -la  // 在用户跟路径查看全部路径

如果存在.nvm则不需要新建目录 如果不存在 则使用mkdir创建

  mkdir ~/.nvm

继续配置 nvm的环境变量

Add the following to ~/.bash_profile or your desired shell

configuration file:

  export NVM_DIR="$HOME/.nvm"

  [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm

  [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

将configuration file下的shell脚本通过vim 编辑器添加到  ~/.bash_profile 最后,编辑完成后 :wq退出,并 执行

source ~/.bash_profile

完成操作后  通过

 echo $NVM_DIR

检查 nvm环境变量是否 生效输出/Users/xxx/.nvm 说明生效了

环境变量配置完成后  

nvm ls 命令可查看当前nvm中 管理的node版本



用nvm 安装node

查找可安装的 node 长期维护版本:nvm ls-remote --its


选择长期支持版本安装:nvm install v12.16.1




 nvm install 8.0.0                    安装指定版本的node

  nvm use 8.0                          使用指定node版本

  nvm run 6.10.3 app.js              使用指定版本 运行js程序

  nvm alias default 8.1.0              设置环境默认node版本

  nvm alias default node                一直使用最新版本node作为默认版本


默认版本将在所有的工作空间生效 

而 use命令只会在当前的命令窗口生效


node 安装完成后 自带npm


使用npm安装 nrm管理 镜像

npm install nrm -g

nrm安装完成后 可以使用nrm ls 查看镜像列表。

使用 nrm use taobao可以快速切换镜像源


名词:

nvm - node version manager - node 版本管理工具

npm - node package manager - node 打包管理工具

nrm - npm registry manager  -  npm 镜像管理工具

















2.安装node.js

1)直接在终端中输入以下命令行安装:

brew install nodejs

2)安装完成后查看node.js的版本信息

node -v

3)获取node.js的访问权限 

sudo chmod -R 777 /usr/local/lib/node_modules/

3.替换npm(淘宝镜像) 

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

不要用cnpm  cnpm源在中国 很多依赖都找不到 项目报错

4、安装webpack (不用装,与npm一样都是包管理工具 一般都用npm,npm包含打包功能)

npm install webpack -g

5、安装vue脚手架

npm install vue-cli -g

二、项目创建与运行

1. 项目创建

    1)cd 本地目录:

      cd /Users/xxxx/Desktop/ 

      2)创建项目test-demo:  

       sudo vue create test-demo

  2.启动项目

   1)进入test-demo项目文件夹:

        cd /Users/xxxx/Desktop/ test-demo
    2)运行项目

         npm run dev 或 npm run serve 

三、MACVScode的必备操作

1.呼出vscode控制台:cmd+shift+Y

2.唤起搜索框:cmd+shift+P     搜锁安装Shell command 'code-insiders' successfully installed in PATH.

3.可能遇上保存或新建文件权限不需要的操作,错误提示如下

Failed to save '***.js': Insufficient permissions. Select 'Retry as Sudo' to retry as superuser

解决方法:1)点击文件,2)找到“显示简介"进入,3)找到“共享与权限”,修改访问权限。4)点击设置选择应用到包含的项目


你可能感兴趣的:(Vue的学习-环境搭建)