本博文是用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!