MaxOS中创建vue项目

硬件系统：macOS
软件应用：Visual Studio Code（VScode）

推荐轻量级编辑器 VScode 和 Sublime text，Sublime小项目测试，VScode用过之后发现它更强大，组件开发项目很实用

1、安装编辑器VScode

下载网址：https://code.visualstudio.com/Download
关于VScode的使用技巧http://www.jianshu.com/p/548023e550bf

2、安装nodeJs

https://nodejs.org/en/ 英文官网
http://nodejs.cn/download/ 中文网
选择自己的操作系统下载，直接安装

3、查看node和npm是否都在

1）打开终端

• 可以打开电脑自带的cmd 苹果电脑 在Launchpad中搜素T，可以找到
• 也可以直接用VScode的终端 效果是一样的
  VScode mac系统没有快捷打开终端，可以默认command+shift+Y打开控制台，就看到终端了
  
  

  image.png

2）查看node是否安装

 node -v       //如果看到数字就代表有安装

image.png

3）查看npm是否安装

 npm -v       //如果看到数字就代表有安装 

image.png

如果没有安装或者版本太老 都需要重新安装
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

 $ sudo npm install npm -g

由于mac有一些权限问题 sudo必须要加，不然就会报错，如果你在以后用npm安装插件时报错 看看是否权限问题

4 安装vue

Vue.js 提供一个官方命令行工具cli，可用于快速搭建大型单页应用。

# 全局安装 vue-cli   
$ sudo npm install -g vue-cli

mac系统sudo 必须加，之后会输入隐藏密码，照常输入，输入正确即可，
安装成功如下图：

image.png

# 创建一个基于 webpack 模板的新项目my-project，换成你自己的项目名字
$ vue init webpack my-project

安装过程中，会需要安装依赖，都选yes就可以了
️ 注意：Use ESLint to lint your code? (Y/n)
规范校验，初学者容易报错，如果不像用可以选no

$ cd my-project  //进入刚刚创建的工程里
$ npm install   //安装node_modules
$ npm run dev   //运行

此时安装过程可能比较慢，按照步骤一步一步来 最终会自动打开漂亮的http://localhost:8080/#/，大功告成！

image.png

用VScode打开刚刚创建的my-project的文件夹，目录如下：