之前工作的时候,有段时间工作的项目是前后端分离的,感觉前后端分离的模式比较舒服,主要是自己对前后端分离的框架比较好奇,所以准备自己搭建一个基于Vue的前端框架,至于对应的后端的框架,等有时间也整理一个出来。当时因为前端缺人,只给了一个前端框架,然后自己学着使用vue,当时即写前端又写后端,由于对Vue的了解是基于应用层级的,就不细讲vue,但是想自己弄一个前端框架。
1.先安装node.js
去官网:Node.js,下载node.js
左边是使用人数最多的,右边是最新版本的node.js,推荐选择左边的,稳定。
安装成功以后,打开命令窗口,输入node -v出现版本号则代表安装成功
再输入npm -v查看npm命令是不是安装成功,出现版本号则代表成功
2.由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.
使用npm命令安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
这个比较耗时,耐心等待。。。
这里安装的时候会出现一个问题,我把这个命令拷贝到txt文档中,然后在命令窗安装镜像,结果提示我说打开了txt文档,关闭即可,我关闭重新安装就可以了。但是现在不知道是打开txt影响的还是因为把安装命令拷贝到txt中影响的,大家能正常安装最好,安装不了了看看不是跟我一个问题
3. 安装vue-cli脚手架
使用命令:cnpm install --global vue-cli,如果这个命令报错可换成:npm install --global vue-cli
//global 表示全局安装,否则会安装到你当前的目录,使用上有限制
4.安装成功以后,在本地磁盘选择一个磁盘,然后创建一个文件夹用来存放即将创建的Vue项目,然后在命令窗口切换到该目录下。
4.1开始创建vue项目,使用命令:vue init webpack 项目名
这时候会提示你输入项目名,它会把你刚才创建的名字给你写出来,在<>内,如果项目名跟你想要的一样,直接回车即可,不一致自己输入。
注意:项目名称不能输入大写字母,不然提示错误,得小写的
4.2会问你这是一个Vue项目吗,直接回车即可
4.3下面就是输入作者
4.4输入完作者以后,会弹出来一堆build的提示,不用管,直接回车即可,回车以后如下:
4.5下面提示是否安装路由,输入y安装
4.6是否使用ESLint检测你的代码,输入n
4.7是否安装测试,这个看个人,我这里就选择n
4.8是否需要安装自动化测试,这个也是看个人,我输入n
4.9.提示项目创建以后,会自动运行npm install安装一些东西,直接同意就是了,等待时间比较长
5.成功以后进入项目所在目录,安装所需依赖
5.1 进入项目所在目录,cd "项目所在文件夹"
5.2安装所需依赖,此依赖安装会产生node_modules文件夹,所有依赖都会安装在此文件夹内
使用cnpm install
5.3启动项目,cnpm run dev
代表启动成功,浏览器访问http://localhost:8080/#/,出现以下页面代表创建成功了
好了,一个简单的vue项目搭建成功了