这里有新鲜出炉的vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
这篇文章主要给大家介绍了利用vscode编写vue简单配置的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
前言
本文主要给大家介绍的是关于vscode编写vue简单配置的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:
PS:现在推荐使用vetur插件
win10崩溃,重装win7,结果sublime text插件无法安装,各种心塞,于是决定转战vscode。
与sublime text相比,vscode有不少优点:
但是st插件更丰富,vscode插件相对较少,vue相关插件vscode更是只有一个,而且使用起来有不少问题,并且作者已经很久没有更新了,折腾了一下午,最终可以用来编写vue项目了。
vscode关于vue插件现在只有vscode-vue一个,安装完成代码提示并没有生效,这是因为vue文件的语言模式默认为html,需要在setting.json中设置:
- "files.associations": {
- "*.vue": "vue"
- }
但是此时编写样式emmet插件不能正确识别,所以我后来也放弃了这种方式。
仔细思考,编写vue项目主要需要:
其中2、3、4点,在html中都是可以做到的,而vue的代码补全与代码片段只需要自己编写就可以了,于是我将vue文件的语言模式还原为默认的html,在用户代码片段中加入vue文件需要的代码片段(文件-首选项-用户代码片段-html),最终效果还可以。
添加的代码片段(持续更新):
- {
- // Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and
- // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
- // $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
- // Example:
- "Print to console": {
- "prefix": "log",
- "body": [
- "console.log('$1');",
- "$2"
- ],
- "description": "Log output to console"
- },
- "Create vue template": {
- "prefix": "vuec",
- "body": [
- "<template>",
- "</template>",
- "<script>",
- "export default {",
- " name: \"${1:component_name}\",",
- " data () {",
- " return {",
- " };",
- " }",
- "}",
- "</script>",
- "<style lang=\"${2:css}\" scoped>",
- "</style>"
- ],
- "description": "Create vue template"
- }
- }
总结
来源: http://www.phperz.com/article/17/0814/338607.html