从零搭建vue开发环境

   写这篇博客之前,楼主是实打实的Java后端人员,偶尔用用js,jq这些前端框架实现前后台交互,用用一些ui控件画画图,仅此而已,所以去用vue这种前后端分离的开发模式非常的不适应,想想都觉得我这篇博客出来的多么心酸。

   首先,既然是前后端分离的项目,那么就说明他们是用不同的工具进行的开发,只不过最后进行一个集成打包。后端就不说了,熟悉常用的idea和数据库即可。前端vue来讲,需要在本地按章node.js的开发环境,其次,需要相应的前端开发工具来配合开发

  1.安装node.js的环境,相关jar包下载路径大家可以去这里:node.js下载,下载解压后,直接运行.exe文件即可。安装完成后我们可以通过cmd黑界面进行查看,(一定要用管理员身份登录,以避免权限不足的问题),直接输入node -v 可以查看node.js的版本号,出来下图中的版本号即代表安装成功。

从零搭建vue开发环境_第1张图片

这个时候我们就要去做相应的准备工作了,需要去下载相应的npm,vue-cli脚手架,我们一步步来。

从零搭建vue开发环境_第2张图片

1.1安装npm

   执行npm install -g cnpm --registry=https:

   第一次安装时间会有点长,需要下载相应的包文件等等,执行完后输入npm -v进行检测,出现相应的版本号即代表成功。

从零搭建vue开发环境_第3张图片

1.2安装vue-cli脚手架

执行npm install --global vue-cli,安装完成后输入vue出现相应信息即代表成功

从零搭建vue开发环境_第4张图片

1.3直接黑界面新建项目进行测试,你需要像后端开发一样,建立一个独属的工作空间,我这里是新建在D:/vueecl

1.4执行vue init webpack test

从零搭建vue开发环境_第5张图片

上图中代表的事执行完后需要输入的相应选项,除了vue-router进行选择以外,其他都可以选择no,而vue-router代表的是是否配置路由,为了浏览器访问的不必要的麻烦我们直接配置为yes,注意此处不需要大小写。

1.5执行cd 项目名

从零搭建vue开发环境_第6张图片

其实走到这里就代表是成功了,我们只需要执行最后一步进行项目启动即可。

1.6启动项目,执行npm run dev

从零搭建vue开发环境_第7张图片

1.7复制图中的地址,浏览器进行访问。

从零搭建vue开发环境_第8张图片

出现如图所示代表你前端启动成功了vue项目。也代表了你对vue以及nodejs的配置成功。

     2.使用相应的前端开发工具开发vue项目,用完dos命令,总该弄点高大上的软件开发vue项目吧,年纪大了记不住那么多命令,,哈哈,我找到的是vscode和hbuilder,经过我的权衡,感觉还是前者高大上一点,下面就着重讲下vscode吧。

   vscode下载

     2.1 首先是vscode的界面风格

从零搭建vue开发环境_第9张图片

其实刚开始进来的时候整体是英文化,只不过在界面右下角不停的提示我中文版本可以更新,所以我就更新成现在的样子啦、当然啦,这些都不重要。

2.2导入之前工作空间的vue项目。点击-->file-->open file-->选择你的文件-->ok.怎么执行呢,

从零搭建vue开发环境_第10张图片

执行相应的命令,完成出现和cmd中一样的链接,代表成功,在浏览器中直接执行出现vim画面即可。

2.3vscode编辑vue项目的插件

  下面我就说几个我安装vscode后的几款插件,便于像楼主这样的小白跳过一些小坑。

2.3.1    vue 2 snippets -->   vue代码提示,像v-model,v-for相应的vue代码,会有相应的提示还是比较方便的,直接在插件中搜索vue,第一个就是。

2.3.2    Eslint -->  代码检查,我知道在java后端的html页面写js,jq代码的时候,硬是要将项目启动后在浏览器进行调试,而这个插件可以帮助我们在代码开发过程中检查我们的代码格式。不过有一点,需要配置一下设置

"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],

 "eslint.options": {
        "plugins": ["html"]
 }

具体配置地点--》

从零搭建vue开发环境_第11张图片

粘贴进右边的用户设置栏即可。

2.3.3Vetur —— 语法高亮、智能感知、Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)

这个同样需要进行配置。

"emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
      }

2.3.4Auto Close Tag —— 自动闭合HTML/XML标签,讲道理每次用alt+/很烦,不熟悉这个软件感觉敲的又很慢,突然发现这个神器,立马装上。

    此处介绍了安装node.js的环境,安装vue-cli脚手架,安装vscode,配置插件,启动vue项目等等,后期会逐步更新相应的文章,希望大家关注

 

你可能感兴趣的:(vue)