初识前端开发vue之环境搭建

步骤一:官网下载node.js官网,按照提示一步一步安装即可.
.
步骤二: 安装cnpm，在命令行中输入

  2 | npm install -g cnpm --registry=http://registry.npm.taobao.org

安装时报下面错误信息

图片.png

这是因为没有访问根路径的权限只需要在命令行前加上sudo就ok了

2 |  sudo  npm install -g cnpm --registry=http://registry.npm.taobao.org

步骤三: 安装webpack

3 | npm install webpack -g

步骤四: 安装vue-cli

4 | cnpm install vue-cli -g

到这里环境安装就告一段落了,下面就是运行项目了.
首先我从svn上下载项目到桌面,下载好之后,使用终端命名cd到项目路径然后ls打卡文件夹,终端命令如下:

图片.png

紧接着就是运行项目了,在终端中输入如下命令

1| npm run serve

可能回报如下错误信息,不过不用着急,慢慢解决就ok了

图片.png

意思就是说没有执行权限,我只需要找到

图片.png

然后在终端中cd 到/Users/zhangyatao/易HR前端2.0/node_modules/.bin/ ,这个具体路径要根据自己项目路径进行输入,最后执行chmod +x vue-cli-service即可,只需要执行一次就ok了,下次直接npm run serve就ok

cd  /Users/zhangyatao/易HR前端2.0/node_modules/.bin/
chmod +x vue-cli-service

然后在次执行

npm run serve

写到这里以为终于要结束了,但但....是你有可能会发现,在执行到98%时突然抛出如下异常

图片.png

大概意思就是说引用的某个文件不存在.....,静下来慢慢分析,最后针对这种情况我找到我的项目中缺少引用的coderconfig.js文件,添加之后再次执行npm run serve,这次是真ok了.

图片.png

写在最后

1. 命名npm run serve中的serve 需要根据项目中配置的来确定,在package.json中的scripts来确定

2. 环境安装后需要重新安装时,需要现删除后然后在重新安装,删除需要依次执行如下命令
   nodejs npm 卸载

   1 | sudo npm uninstall npm -g
   
   2 | sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
   
   3 | sudo rm -rf /usr/local/include/node /Users/$USER/.npm
   
   4 | sudo rm /usr/local/bin/node
   
   5 | sudo rm /usr/local/share/man/man1/node.1
   
   6 | sudo rm /usr/local/lib/dtrace/node.d
   

验证是否成功

如果上述代码你已经按照顺序去执行一遍了，那我们就需要来验证一下我们有没有删除成功,如果出现一下结果说明我们就是删除成功了。

 1 | node -v  //not found
 2 | npm -v //not found