首先-->搞了几天的SpringBoot玩的差不多了,领导直接说, 别项目组需要做前后端分离,说前端缺少人手,没有办法咯,只能硬着头皮去了, 说先学一下'vue',给我个文档让我学学,说是前半年的重点项目,那就开是搞吧! 
  这几年没有搞过前端了, 对前端实在是生疏,搞了一上午, 也没搞出来一个什么道道出来, 原本以为像 jQuery RasyUI类似,直接一个引入js就可以使用了,没想到还需要装各种东西,反正有很多, 因为觉得流程上很麻烦, 就写个文档记录一下, 以后自己还可以用,下面就捋一捋怎么搞吧.

  根据vue官方文档说明,首先得安装node.js,因为vue依赖于node的"NPM"的管理工具来实现, 根据自己电脑配置下载  Node.js下载

    第一步:下载好了后 傻瓜试安装,这种安装一般不会出什么问题, 如果有问题那就管理员权限运行吧,安装完成后 重新打开cmd命令窗,输入 :node -v 出现版本号,则说明安装成功.

    就像这样子:

        

    第二步:安装npm,直接在输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org,看到下面图这样子

        

      最后完成关闭就好了:

        

       如果不放心检查是否安装成功:输入命令:npm -v

        

    第三步:安装 "vue.cli" 脚手架,直接输入命令安装就好了:cnpm install --global vue-cli

        

      下载完了:

      

      安装完成后检查是否安装成功,直接输入vue 如果出现错误提示则说明安装成功咯!

  上面步骤操作完后, 我们就算完成了, 我们可以自己写个小测试项目来检测下是否可以正常使用vue

  在eclipse里面新建项目选择 File -->New -->Other-->CodeMix-->VueProject,然后点击next 输入项目名, 最后点击finish创建项目:如图

        

      如果找不到 "Vue Project", 是因为你的eclipse 少装了一个插件,自己脑补下装一下吧
        

       创建新项目,等待构建完成,

       完成后会弹出如下图,注意看红框内的内容, 跟着照做就可以了.

       

    在eclipse中的Vue项目中打开系统终端,先打开项目根目录的任何文件, 比如READFIRST.md 或 README.md, 然后默认使用快捷键 Ctrl + Alt + T 即可打开终端,如下图, 终端目录地址是项目根目录:如果上述快捷键打不开,则输入 Ctrl + Shift + P 打开搜索框, 输入 terminal关键字查找到 "Open Local Terminal on  Selection" 选项,按回车即可打开终端.
    

      在终端中输入 npm -v  后回车,如果显示版本信息则正常, 如果提示找不到命令,就得检查上面步骤npm 是不是真的安装成功了

      接下来 就开始按照 READFIRST.md 内容里的3,4,5的步骤顺序执行,

        1. 在终端中输入 npm install 后回车,安装完成会生成 node_modules目录,该目录是npm加载的项目依赖模块.

        2. 在终端中输入 npm run serve 后回车,则运行Vue项目.

        3.打开浏览器输入如图第5条: http://localhost:8080.或者http://127.0.0.1:8080,会打开一个网页,如图:

           

          

  这样就大功告成了.安装并测试通过,后续的vue的开发, 还得靠摸索了. 
<声明> 本人也是第一天学习, 查找了好多资料, 折腾了我一天的时间才弄出来,觉得不喜欢的不要喷我..不喜欢可以不看,我只为记录,以后可以给我们公司新人探讨.有不对的地方请大神指点出来, 我也是个初学着.手下留情.

今年开搞了,搭建一下vue开发环境的更多相关文章

  1. 面试官:自己搭建过vue开发环境吗?

    开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...

  2. 快速搭建一个vue开发环境

    常规的搭建就是从npm到vue到webpack这样一个一个的来,这样一套下来说不上复杂但是也不简单.之前公司的vue后台项目 我还是写的轻车熟路的,因为前端同事已经把架子搭好了,环境配置的丝般顺滑,你 ...

  3. 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建

    node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...

  4. 十分钟上手-搭建vue开发环境(新手教程)

    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...

  5. 搭建vue开发环境的步骤,六步完成

    搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:h ...

  6. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  7. vue开发环境搭建及热更新

    写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...

  8. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  9. express+mysql+vue开发环境搭建

    最近开始做一个实验室资产管理系统,后台使用node.js的Express框架,前端使用vue,数据库使用mysql.在这里开始简单记录一下开发过程和遇到的问题. 今天要说的是express+mysql ...

随机推荐

  1. new/delete和malloc/free的比较

    从C++角度上说,使用new分配堆空间可以调用类的构造函数,而malloc()函数仅仅是一个函数调用,它不会调用构造函数,它所接受的参数是一个unsigned long类型.同样,delete在释放堆 ...

  2. yii2.0 app上集成支付宝支付

    1.首先从支付宝官网下载支付宝app支付sdk 地址 : https://doc.open.alipay.com/docs/doc.htm?spm=a219a.7629140.0.0.hLEa5O&a ...

  3. Requests库作者另一神器Pipenv的用法

    前言 我们在运行 Python 项目的时候经常会遇到一些版本问题,例如 A 项目依赖于 Django 1.5,而 B 项目又依赖 Django 2.0,而我们的系统却只有一个 Python 解释器,我 ...

  4. Netty与网络编程

    Netty什么? Netty项目是一个提供异步事件驱动网络应用框架和快速开发可维护的高性能高扩展性服务端和客户端协议工具集的成果.换句话说,Netty是一个NIO客户端服务端框架,它使得快速而简单的开 ...

  5. 学习Javascript数据结构与算法(第2版)笔记(1)

    第 1 章 JavaScript简介 使用 Node.js 搭建 Web 服务器 npm install http-server -g http-server JavaScript 的类型有数字.字符 ...

  6. nsqlookup_protocol_v1.go

    , atomic.LoadInt64(&client.peerInfo.lastUpdate))         now := time.Now()         p.ctx.nsqlook ...

  7. 【BZOJ 4010】 [HNOI2015]菜肴制作

    Description 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予1到N的顺序编号,预估质量最高的菜肴编号为 ...

  8. BZOJ_2600_[Ioi2011]ricehub_二分答案

    BZOJ_2600_[Ioi2011]ricehub_二分答案 Description 乡间有一条笔直而长的路称为“米道”.沿着这条米道上 R 块稻田,每块稻田的坐标均 为一个 1 到 L 之间(含 ...

  9. K短路 (A*算法) [Usaco2008 Mar]牛跑步&[Sdoi2010]魔法猪学院

    A*属于搜索的一种,启发式搜索,即:每次搜索时加一个估价函数 这个算法可以用来解决K短路问题,常用的估价函数是:已经走过的距离+期望上最短的距离 通常和Dijkstra一起解决K短路 BZOJ1598 ...

  10. linux 搜索某个系统命令的位置

    Which命令 功能简述which命令的作用是在PATH变量指定的路径中搜索某个系统命令的位置并且返回第一个搜索结果.也就是说使用which命令就可以看到某个系统命令是否存在以及执行的到底是哪一个位置 ...