声明:本教程不收取任何费用,欢迎转载,尊重作者劳动成果,不得用于商业用途,侵权必究!!!
目录
一、前言
自从创业以后,把写博客的事情给落下了!一直盯着项目几乎很少休息,一个月能休息一天算好的啦,都说 “离职穷半年,创业穷三年”,终于尝到其中滋味!最近静下心来好好反思总结,其中写博客这件事还是不能停止......专注搞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