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

第一步,安装node和npm

image.png

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


image.png

第二步、安装vue和webpack

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

第三步、初始化项目

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


image.png

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

image.png

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

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

image.png

第四步、启动项目

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


image.png

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


image.png

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

image.png

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

image.png

————————————————
版权声明:本文为CSDN博主「执笔年华356」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_39293316/article/details/89603703

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容