Mac中如何搭建Vue项目并利用VSCode开发

摘要:
(2) 安装Vue scaffold和webpack安装Vue staffold:在终端上运行命令cnpmivue cli-g,然后在操作完成后安装webpack。在终端上运行命令cnpmiwebpack-g,然后您可以在操作完成后来到这里。Vue开发环境已构建。(4) 要在Mac上使用VSCode开发Vue项目,首先在Mac上安装VSCode环境工具,单击进入下载界面以找到下载的VisualStudoCode,双击它,然后打开Vue项目文件夹进行开发。

(一)部署Node环境

(1)下载适合Mac环境的Node包,点击进入下载页面

(2)安装Node环境:找到下载好的Node包,这里是node-v12.14.1.pkg,我们双击它,会进入Node.js安装器界面,如下图所示:

Mac中如何搭建Vue项目并利用VSCode开发第1张

我们只要一直点击继续按钮即可,采用默认设置,安装成功后最终的效果图如下图所示:

Mac中如何搭建Vue项目并利用VSCode开发第2张

默认是安装了npm,我们可以在终端中输入node -v和npm -v命令,分别查看node和npm的版本是多少,若Node安装成功后在终端只会输出版本号,若不是这些信息就表明安装失败了;在我这里目前node的版本是v12.14.1,npm的版本是6.13.4;

(3)配置淘宝镜像

要是你能正常访问国外的网站,也可以不用配置淘宝镜像了;在国内最好还是配置一下比较好,在终端中运行下面这条命令:

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

结果提示如下错误,如下图所示:

Mac中如何搭建Vue项目并利用VSCode开发第3张

原来是在向/usr/local/lib/node_modules文件写入内容时提示没有权限,于是在终端中运行这条命令:

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

然后再运行这条命令npm install -g cnpm --registry=https://registry.npm.taobao.org就可以完成淘宝镜像的配置了。到此,Node环境已经部署好了。

(二)安装Vue脚手架和webpack

(1)安装Vue脚手架:在终端运行这条命令cnpm i vue-cli -g,等待运行完毕即可

(2)安装webpack:在终端运行这条命令cnpm i webpack -g,等待运行完毕即可

到此,Vue的开发环境已经搭建完毕。

(三)搭建Vue项目

(1)建立一个指定的目录,比如:/Users/bien/Desktop/workspace/Studio/node,在终端进入该目录,然后运行该命令vue init webpack-simple 工程名字(着重说明一下:工程名字不能含有中文,并且不能含有大写字母),你可以参照这个命令:vue init webpack-simple bien-edge,在运行该命令后你只需要一直按回车键即可,一切配置都采用默认值,在这里我输入了Project name和Author,效果如下图所示:

Mac中如何搭建Vue项目并利用VSCode开发第4张

我们根据上图的提示,进入bien-edge目录,运行npm install命令,然后运行npm run dev命令,结果出错了,如下图所示:

Mac中如何搭建Vue项目并利用VSCode开发第5张

根据提示我也试过了,还是这样,暂时没解决,不过我换了另外一种方式来创建Vue项目,可以继续往下阅读。

(2)换种方式创建Vue项目,上述是通过命令vue init webpack-simple来创建项目的,其实我们可以通过这条命令来创建Vue项目,在终端中运行如下命令:

vue init webpack benny-edge,最终的效果类似下图所示:

Mac中如何搭建Vue项目并利用VSCode开发第6张

此时,进入benny-edge目录,运行npm run dev命令,效果如下所示:

Mac中如何搭建Vue项目并利用VSCode开发第7张

在浏览器中输入http://localhost:8080地址,就可以访问本地服务页面了,如下图所示:

Mac中如何搭建Vue项目并利用VSCode开发第8张

到此为止,Vue项目成功搭建完毕,整个Vue项目的搭建步骤已叙述完,在这个Demo的基础上就可以开发自己的前端产品了。

(四)在Mac中利用VSCode开发Vue项目

(1)首先在Mac上安装VSCode开发环境工具,点击进入下载界面

(2)找到下载好的Visual Stuido Code,双击它即可,然后打开Vue项目工程文件夹就可以进行开发了啦。

------20200110勉

免责声明:文章转载自《Mac中如何搭建Vue项目并利用VSCode开发》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇IE=EmulateIE7 标签的作用js用button激活 Alert 元素关闭按钮的交互功能下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Ant design vue table 单击行选中 勾选checkbox

最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传 期望:Ant design table单击行选中 勾选checkedbox 实现: 单选: onClickRow(record)...

ios7 以后准确获取iphone设备的MAC(物理地址)

通过参考 钉钉 项目,知道是通过wifi拿到路由的MAC地址。那么可不可以拿到iphone 设备的MAC 地址呢? 经过一番搜索,发现所有文章都是针对 ios 7 以前 可以拿到。 而且方法也都是同一篇文章上面的,对于ios7 以后完全没提示。 而使用网络上的方法,在 大于 ios 7 的环境下, 永远返回的MAC 为02:00:00:00:00:00 下...

TI AM335X 网卡驱动解析

1.CPSW驱动及设备的初始化; (1)首先驱动注册cpsw_driver ,会自动进入cpsw_probe执行; 1 static struct platform_driver cpsw_driver = { 2 .driver = { 3 .name = "cpsw", 4 .owner = T...

opencv4nodejs 在 mac 上的安装

一直报错 RPC, 通过以下办法解决的: brew install git //更新git版本 git config --global http.postBuffer 524288000 //增大git缓存 brew unlink tesseract // 如果没有tesseract可以忽略这个命令 然后执行npm -g install opencv4no...

redis集群,添加删除槽

//集群(cluster)   CLUSTER INFO 打印集群的信息   CLUSTER NODES 列出集群当前已知的所有节点(node),以及这些节点的相关信息。       //节点(node)   CLUSTER MEET <ip> <port> 将 ip 和 port 所指定的节点添加到集群当中,让它成为集群的一份子...

eslint使用

vscode配置 需安装eslint和vetur两个插件 原因: 装eslint并配置:编辑时就可提示报错信息,保存可自动修复 vetur:会有一些vue语法提示 配置eslint 1.文件=》首选项=》设置 2.在settings.json中添加 也可在项目跟目录添加.vscode文件,里头添加settings.json,内容为: { // 每次保存...