【Hello VUE】暴学VUE之让代码跑起来(三)

暴学VUE之让代码跑起来

这一章我需要把一个现成的项目跑起来,涉及少量的代码修改。我会一一说明。

下载项目

  1. 打开链接https://github.com/rongxr/vue-elementui,下载项目
    或者使用git命令:git clone -b v1 https://github.com/rongxr/vue-elementui.git
    说明:rongxr/vue-elementui的v1分支,是刚从yinjihuan/vue-elementui克隆过来的版本,未做任何修改。
    【Hello VUE】暴学VUE之让代码跑起来(三)
  2. 在d盘新建文件夹vue_project,把下载的文件vue-elementui-master.zip拷贝到文件夹vue_project目录下,并解压。把文件夹d:\vue_project\vue-elementui-master\elementui\vue-elementui\elementui-demo,拷贝到d:\vue_project\vue-elementui-master\目录下,其他文件可以删除(反正我是这么干的,原来的文件夹层级太深)
  3. 打开命令窗口输入命令,进行全局安装vue脚手架工具,还有安装vue组件:vue-router(路由),element-ui(界面控件),vuex(客户端持久化),axios(类似ajax)
    cd d:\vue_project
    npm i vue-cli -g
    npm i vue-router
    npm i element-ui -S
    npm i vuex
    npm i axios
    【Hello VUE】暴学VUE之让代码跑起来(三)
    【Hello VUE】暴学VUE之让代码跑起来(三)
  4. 进入项目目录,cd vue-elementui-master\elementui-demo,执行命令npm install,进行项目依赖安装。安装时间有点长,因为是从国外服务器下载文件
    【Hello VUE】暴学VUE之让代码跑起来(三)
  5. 执行命令npm run dev,启动项目,启动成功,会自动打开浏览器

【Hello VUE】暴学VUE之让代码跑起来(三)
【Hello VUE】暴学VUE之让代码跑起来(三)

后续

至此,我们终于把这个项目跑起来了。哈哈哈,不容易吧。但是你点击登录按钮(用户名密码随便填),是不能登录的。下一章开始我们的代码改造了。

【Hello VUE】暴学VUE之改造代码(四)