为什么老师可以在新建文件的时候直接生成代码呀

为什么老师可以在新建文件的时候直接生成代码呀

看到老师生成tabbar下的index.vue直接就有代码了可是我这边没有,想知道是什么操作

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕码 2019-07-31 15:52:43

同学你好!

首先打开webstrom软件在File菜单栏找到设置,如下图所示

http://img1.sycdn.imooc.com//climg/5d41479d000114f604890321.jpg

打开设置面板找到File and Code template面板,新建一个文件格式。

http://img1.sycdn.imooc.com//climg/5d41480e000142e406750401.jpg

在File and Code template面板的左上角找到加号新建,然后文件Name和文件Extension分别命名为Vue File和vue,如下所示 

http://img1.sycdn.imooc.com//climg/5d4147f00001131e09830443.jpg

然后在新建的文件模板内容区添加模板内容如下,然后点击ok保存设置。

http://img1.sycdn.imooc.com//climg/5d414824000106b808690487.jpg

<template>    
    <div>
       <div>this is template body</div>
      </div>
</template>
<style>    
</style>
<script>    
</script>

这时候就设置好了,新建一个vue文件并给新建文件起名,然后就可以得到一个新的vue文件,:

http://img1.sycdn.imooc.com//climg/5d4148980001c25b05350403.jpg

http://img1.sycdn.imooc.com//climg/5d4148b90001e6a604580299.jpg

同学可以参考着配置一下

如果帮助到了你 欢迎采纳 祝学习愉快~

好帮手慕码 2019-07-28 09:47:08

同学你好!

“灰灰520”老师介绍的是vscode中的插件哦,在webstorm中可以尝试使用vue.js插件哦

如果帮助到了你 欢迎采纳 祝学习愉快~

  • 提问者 慕妹3422169 #1
    并没有这个插件,是另外的设置
    2019-07-30 13:13:42
  • 好帮手慕码 回复 提问者 慕妹3422169 #2
    插件不唯一,可以使用就行了。请问现在是可以使用了吗?
    2019-07-30 13:35:04
  • 提问者 慕妹3422169 #3
    没有使用任何插件,webstorm里面可以设置,但是不了解参数还是没能和老师一样
    2019-07-31 15:07:15
好帮手慕夭夭 2019-07-27 11:26:07

你好同学,需要安装插件哦。不过目前sublime官网出了问题,插件安装不了。同学如果想要安装插件,推荐你学习免费课中的vscode,这个编辑器可以完全代替sublime去使用,功能很强大,课程地址:

https://www.imooc.com/learn/1106

插件安装步骤:

1.插件库中搜索Vetur,下图中的第一个,点击安装,安装完成之后点击重启

http://img1.sycdn.imooc.com//climg/5d3bc2990001f45d04660282.jpg

2.新建代码片段

步骤,在菜单中按照步骤操作:文件-->首选项(有的可能是英文的preferences)-->用户代码片段-->点击新建代码片段--取名vue.json 确定

http://img1.sycdn.imooc.com//climg/5d3bc36600011dba01970084.jpg

3.文件中删除不要的内容,把自己的模板粘贴到上面创建的文件中。模板代码如下

{

    "Print to console": {

        "prefix": "vue",

        "body": [

            "<!-- $1 -->",

            "<template>",

            "<div class='$2'>$5</div>",

            "</template>",

            "",

            "<script>",

            "//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",

            "//例如:import 《组件名称》 from '《组件路径》';",

            "",

            "export default {",

            "//import引入的组件需要注入到对象中才能使用",

            "components: {},",

            "data() {",

            "//这里存放数据",

            "return {",

            "",

            "};",

            "},",

            "//监听属性 类似于data概念",

            "computed: {},",

            "//监控data中的数据变化",

            "watch: {},",

            "//方法集合",

            "methods: {",

            "",

            "},",

            "//生命周期 - 创建完成(可以访问当前this实例)",

            "created() {",

            "",

            "},",

            "//生命周期 - 挂载完成(可以访问DOM元素)",

            "mounted() {",

            "",

            "},",

            "beforeCreate() {}, //生命周期 - 创建之前",

            "beforeMount() {}, //生命周期 - 挂载之前",

            "beforeUpdate() {}, //生命周期 - 更新之前",

            "updated() {}, //生命周期 - 更新之后",

            "beforeDestroy() {}, //生命周期 - 销毁之前",

            "destroyed() {}, //生命周期 - 销毁完成",

            "activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",

            "}",

            "</script>",

            "<style scoped>",

            "//@import url($3); 引入公共css类",

            "$4",

            "</style>"

        ],

        "description": "Log output to console"

    }

}

4.保存好之后,新建.vue结尾的文件。然后输入vue, 按键盘的tab就行。

祝学习愉快,望采纳。

  • 提问者 慕妹3422169 #1
    webstorm里没有搜到Vetur插件
    2019-07-28 09:10:12
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师