vue 熟悉项目结构创建第一个自己的组件

原创

mzh9112 2021-08-13 11:42:22 博主文章分类：frontend ©著作权

文章标签 vue.js vue Vue html 视频教程 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mzh9112的原创作品，请联系作者获取转载授权，否则将追究法律责任

* 项目入口文件 ./src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

入口文件不需要改动　　

* 项目路由文件 ./src/router/index.js

指定url对应哪些组件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// add router
import cnblog from '@/components/cnblog'
import person from '@/components/person'
 
Vue.use(Router)
 
// configure router
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/cnblog',
      name: 'cnblog',
      component: cnblog
    },
    {
      path: '/person',
      name: 'person',
      component: person
    }
  ]
})

* 项目入口模板./src/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</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>

路由的模板页面都在 <router-view />中，这个文件也不需要改动

* 创建一个组件模板文件 ./src/components/cnblog.vue

组件都放在./src/components/路径下

注意

** 整个模板文件只能是一个根dom节点 <div class="wrapper"></div>

** 文件结尾需要一个空行

** <style scoped> scoped表示只在这一个组件中有效

<template>
<div class="wrapper">
    <div class="binding">
        <p class="msg">{{msg}}</p>
        <input type="text" v-model="msg" />
    </div>
    <button v-on:click="say('Hi')">Greeting</button>
</div>
</template>
 
<script>
var exampleData = {
  msg: 'This is a demo from cnblogs'
}
 
export default {
  name: 'cnblog',
  data () {
    return {
      msg: exampleData.msg
    }
  },
  methods: {
    say: function (msg) {
      alert(msg)
    }
  }
}
</script>
 
<style scoped>
p.msg {
  line-height: 30px;
  height: 30px;
  padding: 10px 0;
}
input {
  width: 200px;
  padding: 2px;
}
.binding {
    margin-bottom: 20px;
}
</style>

　　Run:

npm run dev

vue 熟悉项目结构创建第一个自己的组件_html

* 再创建一个组件person

先添加路由 ./router/index.js

import person from '@/components/person'
Vue.use(Router)
 
export default new Router({
  routes: [
// ...
    {
      path: '/person',
      name: 'person',
      component: person
    }
  ]
})

创建模板./components/person.vue

<template>
<div class="wrapper">
   <fieldset>
                <legend>
                    Create New Person
                </legend>
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" v-model="newPerson.name"/>
                </div>
                <div class="form-group">
                    <label>Age:</label>
                    <input type="text" v-model="newPerson.age"/>
                </div>
                <div class="form-group">
                    <label>gender:</label>
                    <select v-model="newPerson.gender">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
                </div>
                <div class="form-group">
                    <label></label>
                    <button @click="createPerson">Create</button>
                </div>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>gender</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <!-- 循环必须指定key -->
            <tbody>
                <tr v-for="(person) in people" :key="person.id">
                    <td>{{ person.name }}</td>
                    <td>{{ person.age }}</td>
                    <td>{{ person.gender }}</td>
                    <td :class="'text-center'">
                       <!-- <button @click="deletePerson($index)">Delete</button> -->
                       <button @click="deletePerson(person.id)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
</div>
 
</template>
<style scoped>
p {
  padding: 10px 0;
}
table {
    margin: 20px auto;
}
</style>
<script>
var data = {
  people: [
    {
      id: 1,
      name: "Jack",
      age: 30,
      gender: "Male"
    },
    {
      id: 2,
      name: "Bill",
      age: 26,
      gender: "Male"
    },
    {
      id: 3,
      name: "Tracy",
      age: 22,
      gender: "Female"
    },
    {
      id: 4,
      name: "Chris",
      age: 36,
      gender: "Male"
    }
  ]
};
export default {
  name: "person",
  data() {
    return {
      newPerson: {
        name: "",
        age: 0,
        gender: "Male"
      },
      people: data.people
    };
  },
  methods: {
    createPerson: function () {
      this.people.push(this.newPerson);
      // 添加完newPerson对象后，重置newPerson对象
      this.newPerson = { name: "", age: 0, gender: "Male" };
    },
    deletePerson: function (id) {
      // find index
      var index, person;
      person = this.people.find( function (person, idx) {
        var matchID = person.id === id;
        if (matchID) {
          index = idx
        }
        return matchID
      });
      // 删一个数组元素
      this.people.splice(index, 1);
    }
  }
};
</script>

　　 vue 熟悉项目结构创建第一个自己的组件_vue_02

一些分享的教程

Angular5.X+Ionic3.X仿京东商城项目实战视频教程免费下载地址：http://pan.baidu.com/s/1skETGa5

Angular5完整版地址：https://www.itying.com/goods-232.html

Ionic3仿京东商城项目实战完整版地址：https://www.itying.com/goods-460.html

Angular5 Koa2无人点餐无人收银项目实战视频教程免费下载地址：https://pan.baidu.com/s/1Hn-iHvDaRxqjmOZCEIrZZQ

2018年6月最新Mpvue视频教程免费下载地址：
https://www.itying.com/goods-897.html

最新Node.js基础视频教程完整版及Koa2入门实战视频教程免费下载地址：https://www.itying.com/goods-240.html

2018年最新Vue入门实战视频教程免费下载地址：
https://www.itying.com/goods-864.html

* package.json

{
  "name": "getting-started",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "1335250574@qq.com",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "copy-webpack-plugin": "^4.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "nightwatch": "^0.9.12",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}