vue后台管理系统学习(1)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zx13525079024/article/details/83309317

 今天想学习下VUE,从网上看到一个VUE后台管理系统模板,感觉不错,想研究下,没想到,下载后,懵逼了,代码有点复杂,VUE也不从,于是硬着头皮研究下吧。

 后台管理系统模板下载地址:https://github.com/PanJiaChen/vue-element-admin

 1.安装NODE.JS和NPM,

   首先要安装这个工具,VUE是基于NODE.JS的,不要问为什么,我也不知道,总之就按我说的做,保证没错。

  node.js下载地址: https://nodejs.org/en/download/  

 使用手册 https://www.npmjs.com.cn/getting-started/installing-node/

  安装完成后,你就可以使用npm命令了。

 首先解压后台管理系统模板,在解压后的目录下,打开命令行,执行npm install命令,会下载后台管理系统用到的依赖包,

 依赖包下载完成后,会发现当前目录多了一个node_modules 文件夹,所应用的第三方包都在这个文件夹下面

2. 开发工具

    既然是源代码,肯定要用开发工具打开,这里我们使用VISUAL STUDIO CODE, 关于visual studio code的下载和简单用法,我的博客里面有介绍,请自行找。

扫描二维码关注公众号,回复: 3796192 查看本文章

 这里要说两点,安装完visual studio code开发工具后,要安装插件,这样开发起来会更方便,有飞一样的感觉,

 1.一个是高亮插件 color-highlight,一个是vetur, 直接在visual studio code商品里面,搜索安装就可以了 ,如果下图

  

3. 打开后台管理模板

 说这么长时间了,还没入正题,这里我们要打开后台管理系统,很简单,

 visual studio code中使用 文件-->打开文件夹  ,选择要打开的目录就可以了,如下图

项目虽然打开了,还要看到运行效果,

在代码文件夹的目录下,打开CMD命令行,输入 npm run dev命令 ,会自动打开浏览器,看到运行效果,神奇吧,

最后,给大家提示两点,

   第一,使用源代码管理工具的时候,比如SVN,GIT,千万不要把node_modules 目录放入到源代码管理中,否则后果你懂的

  第二,刚才还想起来,现在忘了,不好意思

猜你喜欢

转载自blog.csdn.net/zx13525079024/article/details/83309317