由于最近要使用的项目框架为前后端分离的，采用的是vue.js+webAPI的形式进行开发的。因为之前我没有接触过vue.js，也只是通过视频文档做了一些简单的练习。今天技术主管说让大家熟悉下VSCode开发vue，所以自己摸索了好久，才算是把简单的项目配置成功了。后续还得自己多了解这方面的知识。想着怕时间长了自己会忘记，所以写下来也供有需要的人一起学习。 一.配置环境 1.1 下载VSCode,官网直接下载就行。 1.2 汉化VSCode Ctrl+Shift+P 输入 "configure display language" 然后点击确定后，修改locale.json文件下的属性"locale"为"zh-CN". 重启VSCode工具 con 若重启后VSCode仍为英文版，在商店中搜索 Chinese 安装中文插件，再重新启动VSCode即可. 1.3 安装vue插件vetur，实现支持vue文件的代码高亮 安装插件：ctrl+Shift+X 在商店中查找 vetur 或者 Ctrl + P 然后输入 ext install vetur 然后回车点安装即可 然后在文件->首选项->设置 找到用户设置，点开 userSettings 添加如下的设置 "emmet.syntaxProfiles": {"vue-html":"html","vue":"html" } 1.4安装ESLint 插件 安装插件：ctrl+Shift+X 在商店中查找 eslint或者 Ctrl + P 然后输入 ext install eslint然后回车点安装即可 同样的需要在配置文件中添加如下设置信息： "javascript","javascriptreact","html","vue" ],"eslint.options": {"plugins": ["html"] }, 最终的配置信息如下所示： 二.创建一个vue项目 2.1使用快捷键 Ctrl+~打开终端，输入命令行 vue init webpack yourProjectName ,其中yourProjectName为你的项目名称，这里我创建的是helloworld. 接下来根据提示进行操作 安装完毕后 运行 npm run dev 会出现访问地址：http://localhost:8080 在安装过程中可能会出现 ‘webpack-dev-server’不是内部或外部指令的错误 这是因为在上一步的操作中，我们选择了NO，自己手动注入依赖文件，在后续的npm install 命令后，项目文件内会生成node_modules文件夹，网上有说是重新删除文件夹，然后在项目根目录重新运行终端，输入npm install ,npm run bulid 最后输入 npm run dev 就可成功运行了。但是我试了很多次还是不行。最后又重新新建了项目在是否注册依赖时，选择了 Yes 然后就成功运行了。 最后的效果图是这样的。 至此，一个简单的vue项目就搭建好了。 说实话，自己是第一次接触vue.js 之前一直在接触后端C#，也希望通过项目自己能够掌握的更牢固，以便后续的学习和成长。加油。 好文要顶 关注我 收藏该文 wnxyz8023 关注 - 7 粉丝 - 2 +加关注 1 « 上一篇：SqlServer的两种插入方式效率对比 posted @ 2018-11-20 16:47 wnxyz8023 阅读(259) 评论(6) 编辑 收藏 评论列表 #1楼 2018-11-20 17:43 TesterWei 2.1使用快捷键 Ctrl+~打开终端，输入命令行 vue init webpack yourProjectName ,其中yourProjectName为你的项目名称，这里我创建的是helloworld. 很精髓，不错，关注你了。 支持(0)反对(0) #2楼 2018-11-20 17:56 misaky @ TesterWei 哪精髓了？ 支持(0)反对(0) #3楼 2018-11-21 07:39 我爱学习默无闻 很好，有几个问题需要请教 支持(0)反对(0) #4楼 2018-11-21 08:56 爱叫erhao的我 最近我也是刚好在学vue，可以相互学习呀 支持(0)反对(0) #5楼[楼主] 2018-11-21 09:23 wnxyz8023 @ 爱叫erhao的我 嗯哪，我也是刚入门。慢慢学习，加油 支持(0)反对(0) #6楼 2018-11-21 09:30 爱叫erhao的我 @ wnxyz8023 我也是，我刚入这行不久，很多东西都要学，上周老大说要我去学一下vue，折腾了好几天，才做出一个简单的Demo 支持(0)反对(0) 刷新评论刷新页面返回顶部 注册用户登录后才能发表评论，请 登录 或 注册，访问网站首页。 【推荐】超50万VC++源码: 大型组态工控、电力仿真CAD与GIS源码库！ 【活动】申请成为华为云云享专家 尊享9大权益 【工具】SpreadJS纯前端表格控件，可嵌入应用开发的在线Excel 【腾讯云】拼团福利，AMD云服务器8元/月 qcloud 相关博文： · 使用webpack配置vue项目代理 （超简单） · vscode使用配置 · vue vscode 开始 · VSCode和VUE的初始安装及简单使用入门 · 使用VsCode运行Vue项目 最新新闻： · 外媒：京东双十一借实习压榨职校学生 不配合难毕业 · 内讧不断、决策失误 Uber全球首例无人驾驶致死内幕 · 互联网职场的「隐形坑」，你踩过几个？ · 传腾讯音乐考虑将IPO推迟到明年初 · 职业打假人王海举报美团支付违规：可被挪用资金70亿 » 更多新闻... 公告 https://www.cnblogs.com/wnxyz8023/p/9989447.html