写这篇博客之前,楼主是实打实的Java后端人员,偶尔用用js,jq这些前端框架实现前后台交互,用用一些ui控件画画图,仅此而已,所以去用vue这种前后端分离的开发模式非常的不适应,想想都觉得我这篇博客出来的多么心酸。
首先,既然是前后端分离的项目,那么就说明他们是用不同的工具进行的开发,只不过最后进行一个集成打包。后端就不说了,熟悉常用的idea和数据库即可。前端vue来讲,需要在本地按章node.js的开发环境,其次,需要相应的前端开发工具来配合开发
1.安装node.js的环境,相关jar包下载路径大家可以去这里:node.js下载,下载解压后,直接运行.exe文件即可。安装完成后我们可以通过cmd黑界面进行查看,(一定要用管理员身份登录,以避免权限不足的问题),直接输入node -v 可以查看node.js的版本号,出来下图中的版本号即代表安装成功。
这个时候我们就要去做相应的准备工作了,需要去下载相应的npm,vue-cli脚手架,我们一步步来。
1.1安装npm
执行npm install -g cnpm --registry=https:
第一次安装时间会有点长,需要下载相应的包文件等等,执行完后输入npm -v进行检测,出现相应的版本号即代表成功。
1.2安装vue-cli脚手架
执行npm install --global vue-cli,安装完成后输入vue出现相应信息即代表成功
1.3直接黑界面新建项目进行测试,你需要像后端开发一样,建立一个独属的工作空间,我这里是新建在D:/vueecl
1.4执行vue init webpack test
上图中代表的事执行完后需要输入的相应选项,除了vue-router进行选择以外,其他都可以选择no,而vue-router代表的是是否配置路由,为了浏览器访问的不必要的麻烦我们直接配置为yes,注意此处不需要大小写。
1.5执行cd 项目名
其实走到这里就代表是成功了,我们只需要执行最后一步进行项目启动即可。
1.6启动项目,执行npm run dev
1.7复制图中的地址,浏览器进行访问。
出现如图所示代表你前端启动成功了vue项目。也代表了你对vue以及nodejs的配置成功。
2.使用相应的前端开发工具开发vue项目,用完dos命令,总该弄点高大上的软件开发vue项目吧,年纪大了记不住那么多命令,,哈哈,我找到的是vscode和hbuilder,经过我的权衡,感觉还是前者高大上一点,下面就着重讲下vscode吧。
vscode下载
2.1 首先是vscode的界面风格
其实刚开始进来的时候整体是英文化,只不过在界面右下角不停的提示我中文版本可以更新,所以我就更新成现在的样子啦、当然啦,这些都不重要。
2.2导入之前工作空间的vue项目。点击-->file-->open file-->选择你的文件-->ok.怎么执行呢,
执行相应的命令,完成出现和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"]
}
具体配置地点--》
粘贴进右边的用户设置栏即可。
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项目等等,后期会逐步更新相应的文章,希望大家关注