搭建Vue开发环境的过程


说明

由于不想按照vue文档上说的,起步学习。决定首先学习vue环境的搭建。
按文档上说的命令行的操作,相对简单一点,但是这样操作下去对环境
搭建的原理是不清楚的。俗话说好奇心害死人,于是就开始研究node等相关
知识了。

  • 研究node

首先去看了朴灵
的深入浅出node,一头扎进入,觉得写的有点深,理解起来费劲,不适合我这种
刚入门的菜鸟。于是在各大论坛上问入门node的资料,感谢微信群里面的一个好友
分享了一个连接,名字叫nodejs保教不会,我用的那个连接是一个github仓库
地址,周末在家码字连接在公司,想知道的话直接百度就可以了。这个仓库里的
教程比较适合入门,但是读下来有点虎头蛇尾的感觉,想对node深入了解,那是
需要工作积累的,但是用于理解搭建前段的开发环境已经够了。

  • 研究webpack

研究完node,只是对node的基本用法和npm版本和仓库管理有了初步的认识。
但是对于前端工程的打包,部署,测试等技术还是理解的不够深入。看了vue
的文档,要学习webpack,node学习完之后就立刻去学习了。学习的过程很简单
读了一篇很好的博客感兴趣的可以去好好读一下,相信用心读过之后对webpack技术会有一个比较
初步的了解。之前在公司经常用gulp,所以对我来说理解webpack也相对来说
容易了些。

  • 开发工具,版本管理工具
    这次开发工具接着用我经常使用的IntelliJ IDEA ,如果非得解释一下开发
    vue也要用它的话,很简单:这个工具开发java很好用,我是java工程师嘛。
    但是不仅仅是这些,这个工具对前端语言的支持一点也不差,就选它了。
    版本管理就选git了,用完git再也回不到svn了。

  • 在idea里面搭建环境

首先在github上创建仓库,用ideacheck到本地来,在idea 里面的
Terminal里面,在自己项目根目录下面运行如下脚本(运行如下脚本前要安装node和npm):

    //设置npm仓库镜像为国内淘宝镜像
    npm config set registry https://registry.npm.taobao.org
    //查看配置是否成功
    npm config get registryf
    //全局安装webpack
    npm install -g webpack
    //全局安装 vue-cli
    npm install-global vue-cli
    //创建一个基于webpack模板的项目
    vue init webpack my-project
    //cd my-project,这一步会等很久
    npm install
    //这一步看着简单,实际上都在配置文件里面配好了,可以去研究一下
    npm run dev

接下来我的浏览器就弹出了搭建成功后的首页,开心。从研究node到这一步用了
将近两个星期的时间,当首页弹出时还是很开心的,这对我来说就是乐趣所在。
加油


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM