关于vue.js:Vue单文件项目自定义组件入门

10次阅读

共计 3231 个字符，预计需要花费 9 分钟才能阅读完成。

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>