Vue框架项目实战整理：1、Vue开发工具介绍、快速启动、常见错误

声明：本教程不收取任何费用，欢迎转载，尊重作者劳动成果，不得用于商业用途，侵权必究！！！

目录

一、前言

二、使用过的开发工具介绍

Sublime Text

Visual Studio Code

IntelliJ IDEA

WebStorm

三、快速启动Vue项目

1、指定项目目录

2、启动项目

3、项目文件下面的目录

4、命令行界面

5、显示效果界面

四、根据模板再次创建新的项目、启动新项目

（1）指定项目要存放的目录

（2）新建项目

（2）切换到项目目录 

（3）安装项目所需依赖 node_modules

（4）常见错误解决

（5）启动项目

---

一、前言

自从创业以后，把写博客的事情给落下了！一直盯着项目几乎很少休息，一个月能休息一天算好的啦，都说 “离职穷半年，创业穷三年”，终于尝到其中滋味！最近静下心来好好反思总结，其中写博客这件事还是不能停止......专注搞Android多年，但由于项目需要也做了Web前端开发、Web App，所以想把这方面的知识给总结分享下！后面还会为自己这次创业经历做些总结，画个句号！

二、使用过的开发工具介绍

如果是Android开发，开始需要eclipse再安装ADT，后来用的google集成的eclipse，现在肯定用的Android Studio！但是前端开发知识在大学和实习的时候有系统学习过，因创业项目需要使用vue，于是花了二天时间先把 html+js+css 的笔记过了一遍然后再研究vue！工欲善其事，必先利其器，所以我首先想找个好的开发工具！下面是我使用过的工具简单介绍下：

Sublime Text

通过咨询以前同事，她给我推荐了Sublime Text，于是下了一个Sublime Text。但我用的mac，下载下了感觉跟windows上的差别很大，于是在网上找了一些资料配置了一下，只能说凑合能用吧！

Visual Studio Code

学习的时候在网上看了一些资料，看到他们用的Visual Studio Code也就下了一个，在网上找了一些插件，比起Sublime Text用着舒服一些。不得不吐槽mac软件少，即使有也比windows简洁很多，很多功能没有或需要自己配！

IntelliJ IDEA

相对于前面2款软件我更倾向于idea，因为它很多操作都相似于Android Studio，当时在我印象中Android Studio好像就是google基于IntelliJ IDEA推出的一个Android集成开发工具，搜索了一番果不其然！所以我现在用的就是IntelliJ IDEA，如果你像我一样用的mac系统，做过Android开发，我推荐使用IntelliJ IDEA（比较耗资源，如果使用卡顿的话那就用VS Code吧）

WebStorm

看到同事有用，貌似可以像eclipse新建java项目一样等功能，闲暇用了再谈心得，没有具体尝试试用！

 

三、快速启动Vue项目

1、指定项目目录

cd + 项目目录，如：cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/vue_project/demodemoyyh

2、启动项目

npm run dev

3、项目文件下面的目录

4、命令行界面

5、显示效果界面

 

四、根据模板再次创建新的项目、启动新项目

（1）指定项目要存放的目录

cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/vue_project/

（2）新建项目

vue init webpack-simple demodemoyyh2

（2）切换到项目目录 

cd demodemoyyh2

（3）安装项目所需依赖 node_modules

执行 npm install 安装项目所需依赖，也就是node_modules里的依赖文件。

在开发的过程中，往往这个文件是不会提交到svn、git服务器上的，这时候你把项目下载下来，需执行此命令

npm install

（4）常见错误解决

报错：

npm ERR! cancel after 1 retries!

npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/luminal/.npm/_logs/2018-07-13T02_10_09_428Z-debug.log

解决方式：

npm init -y

 

提示：

npm notice created a lockfile as package-lock.json. You should commit this file.

added 973 packages from 645 contributors in 69.963s

解决方式：

npm init【因是警告不是报错，就没有执行此命令了。】

 

（5）启动项目

npm run dev

 

我的实践命令记录：

cd /Users/luminal/Desktop/yyh_xinyuan_project/xinyuanEstate_pc_myWorkspace

vue init webpack-simple login_yyh

cd login_yyh

npm install

npm run dev

 

?Project namelogin_yyh【直接enter】 

?Project descriptionA Vue.js project【直接enter】

?Authoryyh【输入yyh，然后enter】

?LicenseMIT【直接enter】

?Use sass?No【直接enter】

 

cd /Users/luminal/Desktop/yyh_xinyuan_project/xinyuanEstate_pc_myWorkspace/login_yyh

npm run dev