vue+webpack+node快速构建项目(MD.1)

漫岛的前后端配合上,采用的是rest API方式,前后端分离。
考虑到项目第一期的页面不多,开发要快性能要好,自然要利用前端的自动化工具。
开始直接用Vue-cli3.0,Vue官方出品脚手架,基于webpack但是做了很多自己的封装和插件选择,这里不推荐对配置完全懵逼的小伙伴使用,要求node版本大于8.0。
值得一提的是vue-cli3.0提供了一个可视化UI界面,只需要输入命令vue ui就会自动启动。创建项目的时候可视化的选择所需的依赖及配置,比在命令窗口方便许多,界面如下:
这里写图片描述
但是本次我没有采用,考虑到最新的不如最稳定的(自己技术不行)。于是还是用vue-cli3.0之前的方式来构建的。node版本推荐使用稳定版本8.x,用命令行node -v可以检测自己的node版本。
先全局安装vue-cli脚手架,命令输入cnpm install vue-cli -g
再执行vue init webpack projectName(你的项目名称) 初始化项目,这里提示我需要全局安装一下vue/cli-init插件
这里写图片描述
老老实实的安装,cnpm install -g @vue/cli-init,安装完成之后再执行vue init webpack + “项目名称”,这里我的项目取名myland。然后就会让你配置一些基本的信息了,根据自己需要选择就行了,一般我不选eslint,挺烦的!可选配置如下:
这里写图片描述
选择完成之后它就会给你自动构建好项目了,但是最后一步问你是否需要给你用npm安装依赖的时候最好选择自己手动装,npm在国内太慢了,得等很久。成功构建完成的项目结构如下:
这里写图片描述
基本上,起步的话很简单,就几个命令就搞定了。所以这里也不去长篇大论的讲了!

总结一下:
1.下载一个node并安装。
2.下载个git做命令行工具,原因是方便快捷,想在哪个文件下写命令点一下鼠标右键选择git bush here就直接到这个文件目录了,不用你去一层层的进入。
3.cnpm install vue-cli -g安装vue-cli脚手架
4.cnpm install -g @vue/cli-init 安装vue-init所需依赖—如果提示你需要安装的话
5.vue init webpack + 项目名称
6.根据提示进行插件选择和配置
7.在项目目录cnpm run dev即可在浏览器运行你的项目
完成以上步骤自动化构建就完成了,然后开始写代码吧。

上一篇文章:漫岛创业故事(序)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章