基于vue和node的个人博客的设计与开发日记——day1技术架构脚手架搭建

因为手头小程序的项目告一段落,就打算搞点新事情
据说小程序语法和vue非常相似,同时老师公司用的是vue+node,所以萌生做一个个人博客的打算

前期已经做好了网站UI,因为感觉这种网站技术含量不是非常高,所以给自己设计了一个布局贼困难,看起来好像有点好看,但是不知道怎么做适配的UI设计稿

但做都做出来了还是就开工吧(其实并没有设计完,有的小元素和子页面实在是设计不出来了还是先开工叭

首先!要确定技术架构,因为我要一个人做我还不会java啥的,所以用后端用node和mysql。

前端:
HTML+CSS布局
路由:vue-router
轮播图:应该会用到轮播插件自己写是不可能自己写的这辈子都不可能自己写的
自适应:rem和媒体查询(虽然现在还没有设计好手机端的UI)
后端:
mysql做数据库
axios做数据传输

暂时的计划是这样,然后就开始安装了!我用npm装的,一共需要npm node vue-cli 还有 webpack
在控制台分别输入

npm install -g cnpm --registry=https://registry.npm.taobao.org
//安装淘宝镜像
npm -v
node -v
cnpm install --global vue-cli
//全局安装vue-cli
vue -V
//vue -V一定要大写
webpack -v

来检查是否安装成功,如果安装成功提示的是相对应的版本号。
装完之后一天大概过去了一半:)然后我开始搭建脚手架,我的webstorm不支持新建vue项目,所以只能手动搭建。
在要创建文件的目录进入cmd

vue init webpack 文件名

这时候会询问一些问题,我一路Y到底了,有需要可以仔细阅读一下
完成之后就生成了文件夹,进入文件夹,在文件夹里打开cmd
输入命令: npm install 初始化安装依赖

也可以添加编译方式,参数如图
基于vue和node的个人博客的设计与开发日记——day1技术架构脚手架搭建_第1张图片
运行就可以看到vue的首页啦,这样整个环境就搭建完成

你可能感兴趣的:(基于vue和node的个人博客的设计与开发日记——day1技术架构脚手架搭建)