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

一：设置Mac环境

（1）安装Node环境：点击进入下载页面 ，找到下载好的Node包，双击进入Node.js安装器界面默认安装即可。（默认是安装了npm，我们可以在终端中输入node -v和npm -v命令，分别查看node和npm的版本是多少，若Node安装成功后在终端只会输出版本号，若不是这些信息就表明安装失败了）
　　　　
（2）配置淘宝镜像
　　要是你能正常访问国外的网站，也可以不用配置淘宝镜像了；在国内最好还是配置一下比较好，在终端中运行下面这条命令：

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

结果提示如下错误，如下图所示：

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

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

然后再运行这条命令npm install -g cnpm --registry=https://registry.npm.taobao.org就可以完成淘宝镜像的配置了。

二：安装Vue脚手架和webpack

（1）安装Vue脚手架：在终端运行这条命令cnpm i vue-cli -g，等待运行完毕即可
（2）安装webpack：在终端运行这条命令cnpm i webpack -g，等待运行完毕即可
　　到此，Vue的开发环境已经搭建完毕。

三： 搭建Vue项目

我们可以通过这条命令来创建Vue项目，在终端中运行如下命令：vue init webpack benny-edge，

会让你确认关于你创建的项目的一些信息，具体如下：

①、Project name ( benny-edge)；项目名称（ benny-edge）。（确定按enter，否按N）
②、 Project description (A Vue.js project)；项目描述（一vue.js项目）。（随意输入一段简短介绍，用英文）
③、Author (sunsanfeng)；作者（sunsanfeng）。（确定按enter，否按N）
④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render 　　　　　　　　functions are required elsewhere；Vue公司的建立（使用箭头键）>运行时+编译器：大多数用户推荐运行时间：约6kb轻民+ gzip，但模板（或任何Vue具体HTML）只允许在。VUE文件渲染功能是必需的其他地方。（按enter）
⑤、Install vue-router? (Y/n)；安装的路由？（/ N）。（可安可不安，以后也可以再安，根据需求选择）
⑥、Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ N）。（使用ESLint语法，就要做好心理准备，除非你非常懂ESLint语法，要不就会处处报错，建议N）
⑦、Setup unit tests with Karma + Mocha? (Y/n)；设置单元测试？（Y / N）。（选N）
⑧、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？（Y / N）。（选N）

最终的效果类似下图所示：
　　
此时，进入benny-edge目录，运行npm run dev命令，若报错This is probably not a problem with npm. There is likely additional logging ：输入npm install 或 cnpm install 后，再次运行npm run dev命令，运行成功效果如下所示。
　　

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

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

（1）首先在Mac上安装VSCode开发环境工具，点击进入下载界面
（2）找到下载好的Visual Stuido Code，双击它即可，然后打开Vue项目工程文件夹就可以进行开发了啦。
（3）安装vue插件vetur，实现支持vue文件的代码高亮
（4）安装ESLint 插件(若懂ESLint语法可安装使用，不懂也可以不安装)

参考