Vue项目2：使用自定义组件

本博文是用Vue Cli新建的项目为基础，编写自己的Component组件。

 

创建项目

进入cmd命令行，切换至工作目录，例如F:\Study\vue\demo

C:\Users\Administrator>f:
F:\>cd F:\Study\vue\demo
F:\Study\vue\demo>

全局安装vue-cli

npm install -g vue-cli

 新建项目，项目名称为vueapp

vue init webpack vueapp

注意：过程中如下提示填写n，其他按回车使用默认选项

? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No

进入工程目录

cd vueapp

运行项目 

npm run dev

 打开浏览器输入localhost:8080，输出如下：

 

删除原有组件

1.用编辑器打开代码，这里用的编辑器是vscode，你也可以用其他编辑器，例如sublime text

2.进入src/components目录，删除HelloWorld.vue文件。

3.打开src/App.vue，删除components里的HelloWorld（第14行代码），删除import HelloWorld from './components/HelloWorld'（第9行代码），删除<HelloWorld/>（第14行代码），删除第3行代码<img src="./assets/logo.png">，这时候浏览器没有显示任何内容，按F12查看Console也没有任何报错（若有报错，重新运行npm run dev），浏览器效果如下：

使用自定义的组件Test.vue

1.在src/components目录下新建Test.vue文件，代码如下：

<template>
    <div class="test">
        <h1>Test</h1>
    </div>
</template>

<script>
export default {
    name: 'test'
}
</script>

<style scoped>
</style>

2.修改App.vue，代码如下：

<template>
<div id="app">
<test></test>
</div>
</template>

<script>
import Test from './components/Test'
export default {
name: 'App',
components: {
    Test
}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

3.查看浏览器输出，如下：

看到如上内容，说明使用自定义组件ok了，接下来可以编写更多vue应用代码

 

修改Test.vue

修改div内容：

<h1>{{title}}</h1>

修改export defaul内容：

export default {
    name: 'test',
    data(){
        return {
            title: 'Hello world'
        }
    }
}

保存后，查看浏览器

 

 

完成！ enjoy it！