(六)单文件应用

我心飞翔 分类:vue

vue单文件应用

一、如何创建一个组件

cosnt app = Vue.createApp({})
app.component('组件名字', {
    data() {
        return {
            content: ''
        }
    },

    computed: {
        return this.content.length
    },

    template: `
        <div>
            <input v-model="content" />
            <p>你共输入了 {{ count }} 个字符</p>
        </div>
    `
})

const vm = app.mount('#app')

二、全局注册组件

cosnt app = Vue.createApp({})

app.component('全局组件名字', {
    template: `
    <div>
        <h1>字符统计应用</h1>
        <WordCount />
    </div>`
})

const vm = app.mount('#app')

三、局部注册组件

// 先引入组件 
import ComponentApp from './component/index.vue'

const app = Vue.createApp({
    // 注册组件
    components: {
        ComponentApp
    }
})

const vm = app.mount({#app})

四、使用 Vite 创建 Vue 项目

  1. 打开终 使用idea或者vscode编辑器,打开本地终端,就是为了在自定义的目录中新建vue项目
(六)单文件应用

2.这边是使用npm创建vite,输入npm create vite@latest ,使用yarrn 可输入 yarn create vite,会有提示,一步步选择vue即可

3.如果想要一个模板,创建一个vite+vue的模板,就输入npm create vite@latest my-vue-app -- --template vue

(六)单文件应用

4.进入你创建的app目录中,cd cillian-vue

5.运行npm install安装依赖

(六)单文件应用

6.运行 npm run dev 运行项目

(六)单文件应用

7.ok项目创建完成,咱们下一章来说说创建和使用单一文件组件

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容