Vue单文件项目自定义组件入门
1.安装vue-cli工具,全局安装vue-cli
npm install -g @vue/cli
或者
yarn global add @vue/cli
2.创建一个项目
//创建一个名字为rumenz-demo的项目
➜ vue vue create rumenz-vue
Vue CLI v4.5.4
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
//创建项目需要一定的时间,时间长短取决于你的网速,vue-cli会联网自动装一些依赖
初学者建议使用默认的的配置
Default ([Vue 2] babel, eslint),当然也可以选择Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features为手动配置选项
3.项目结构介绍
.
├── README.md
├── babel.config.js
├── package.json // 依赖模块的清单
├── node_modules //项目的依赖
├── public
│ ├── favicon.ico
│ └── index.html //模版文件
├── src //源代码目录
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ └── main.js //入口文件
└── yarn.lock
4.用vs code打开rumenz-vue目录,启动项目
npm run serve
根据控制台提示打开对应的链接,如果显示以下界面,则表示项目启动成功
http://localhost:8080/
5.入口文件rumenz-vue/src/main.js和模版文件rumenz-vue/public/index.html介绍
rumenz-vue/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!--整个应用的挂载点,根节点-->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
rumenz-vue/src/main.js
//导入Vue
import Vue from 'vue'
//导入当前目录下的App.vue文件
import App from './App.vue'
//阻止vue启动生产消息
Vue.config.productionTip = false
//创建一个Vue,并挂载到模版index.html的<div id="app"></div>下
new Vue({
render: h => h(App),
}).$mount('#app')
6.App.vue源代码结构介绍
三大块
<!--页面结构-->
<template>
</template>
<!--业务逻辑js-->
<script>
</script>
<!--样式-->
<style>
</style>
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
//导入了一个自定义的组件
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld //必须要注册导入的组件,不然无法使用
}
}
</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>
7.创建一个组件
创建ItemOne.vue文件
<template>
<li class="item">{{item}}</li>
</template>
<script>
export default {
props:['item']
}
</script>
<!--scoped样式局部作用-->
<style scoped>
.item{
color: red;
}
</style>
使用组件
App.vue
<template>
<div id="app">
{{msg}}
<div>
<!--v-model绑定到info变量上-->
<input type="text" v-model="info">
<!--@click绑定点击事件-->
<button @click="handle">添加</button>
</div>
<!--必须绑定:key :item表示组件ItemOne.vue的定义的变量,通过的属性的方式传递值到子组件-->
<item-one v-for="item in list" :key="item" :item="item"></item-one>
</div>
</template>
<script>
//导入上面的模块
import ItemOne from './components/ItemOne'
export default {
name: 'App',
data() {
return {
msg: "hello 入门小站",
info: '',
list: []
}
},
methods: {
handle(){
this.list.push(this.info);
this.info='';
}
},
components: {
ItemOne
}
}
</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>
关于自定义标签item-one的说明,官网上这样说：HTML特性是不区分大小写的。所以，当使用的不是字符串模板，camelCased（驼峰式）命名的prop需要转换为相对应的kebab-case（短横线隔开式）命名：如果你是用字符串模板，则没有这些限制。
项目源码:https://github.com/mifunc/rumenz-vue
浙公网安备 33010602011771号