1、初学VUE笔记—项目创建及使用组件

119 阅读1分钟

一、创建项目

1、查看是否安装好:vue -V
2、创建项目:vue create learn-vue-cli
3、安装完cd到当前目录 code learn-vue-cli
4、启动调试:npm run serve
5、做完打包:npm run build,打包后会生成dist文件
6、cd到dist,执行:serve .指令可打开服务

二、创建单页面组件

1、在components文件夹下新建.VUE文件
2、在template中书写文本内容及容器id
3、在script中设置导出

export default {
  name: "test",
  props: {
    msg: String,
  },
  
};

4、在App.vue文件script设置组件引入及组件的注册

import test from "./components/test.vue
export default {
  name: "App",
  components: {
    test
  },
};

5、在App.vue文件template中使用组件

<test msg="Welcome to test" />

6、组件中定义属性及方法

data(){
    return{
      title:0
    }
  },
  methods:{
    geetr:function(){
    this.title+=1
      }
  }