vue+Element搭建后台管理系统(一)快速搭建vue项目框架

原创 下一次流星 教程 前端 99阅读 29 天前 举报

前段时间公司要开发一个后台管理系统,思考了半天,决定选用vue这一框架,其实是公司强制要求的,哈哈,好了,别的不多说了,今天主要是帮助大家快速搭建起vue项目。
第一步,安装node和npm

百度搜索关键字'node',就可以了,然后根据电脑的操作系统,直接下载就可以了
具体的安装步骤就不细说了,这个网上有很多,实际上一直点下一步就可以了,哈哈
现在最新的node里面已经包含有npm了,所以大家不用再安装npm了
安装好之后,在控制命令行程序(CMD)中分别输入node -v和npm -v查看一下,已确认是否安装成功,成功的话,会有类似下面的打印

第二步、安装vue和webpack
在控制命令行程序(CMD)中分别输入下面两行命令
npm install -g vue-cli 全局安装vue脚手架
npm install -g webpack 全局安装webpack
同样的想查看是否安装成功,输入webpack -v跟vue -V查看webpack的版本号跟vue的版本号,就行了

第三步、初始化项目
创建项目前,要选好项目所在的位置,比如我是在F盘,就直接在cmd中输入f:,进入F盘就可以了

在控制命令行程序(CMD)中输入vue init webpack vue-demo,vue-demo是你的项目名字,记住不能有大写字母

下面说一下其中的每一项的含义:
Project name————是你的项目名称,记住不能有大写字母
Project description————项目的简单描述,这个一般直接按Enter键,自动生成就可以了
Author————项目的作者
Install vue-router————是否使用vue-router,一般都选用,输入y
Use ESLint to lint your code————代码是否使用ESLint规范,我这里没有使用,所以输入n
剩余的几项直接按Enter键,自动生成就可以了

创建完之后,进入F盘会发现多个了vue-demo文件夹,打开文件夹里面是这样的

第四步、启动项目
此时项目搭建进入最后一步了,下载相关依赖文件,在控制命令行程序(CMD)中输入cd vue-demo进入到vue-demo文件夹

然后输入npm install,下载所需要的各种依赖文件,下载完之后你会发现vue-demo文件夹下多了个node_modules文件夹
最后输入npm run dev就可以启动项目了,出现下面页面就说明项目启动成功了

但此时需要你手动在浏览器输入http://localhost:8080/#/,才能显示在浏览器中看到下面页面

到此,可以说一个简单的vue项目我们就创建好了,不过有一点不足,就是URL地址需要我们自己手动在浏览器中输入,其实这是我们没有开启webpack的热服务,改下配置就好了

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复