nodejs - npm安裝vue及應用

一、前言

前提：nodejs安裝完畢，webpack安裝完畢
工具：webstrom

二、過程

【1】安裝腳手架

1】桌面新建vueapp文件夾，打開終端，安裝vue-cli

npm install [email protected] -g

2】vue項目初始化

vue init webpack vueapp

一路回車，no

3】進入vue項目目錄

cd vueapp

下載vue所需要用的模塊插件和庫

npm install 

4】項目結構分析

App.vue

main.js

5】啓動項目

npm run dev

6】如何建立空白模板呢？

【2】基礎語法1

1】新建Test.vue


2】修改App.vue

3】頁面展示

【3】基礎語法2

Teat.vue

App.vue中修改

【4】基礎案例 - 簡單用戶管理

安裝路由模塊

npm install vue-router --save 

安裝http請求模塊

npm install vue-resource --save 

數據接口url:http://jsonplaceholder.typicode.com/

Test.vue

<template>
  <div class="test">
    <h1>{{title}}</h1>
    <p>{{user.firstName}}</p>
    <p v-text="user.lastName"></p>

    <!-- v-if 執行 v-else 就不執行，反之亦然 -->
    <p v-if="showName">{{user.firstName}}</p>
    <!-- v-else -->
    <p v-else="showName">Nobody</p>

    <!-- v-for -->
    <ul>
      <li v-for="item in items">{{item.title}}</li>
    </ul>

    <!-- v-on -->
    <button v-on:click="greet('Hello EveryBody')">Say Greeting</button>

    <!--鍵盤事件-->
    <input type="text" v-on:keyup="pressKey" v-on:keyup.enter="enterHit">

    <hr>
    <!-- computed 計算屬性 -->
    <label>First Name</label>
    <input type="text" v-model="user.firstName">
    <br>
    <label>Last Name</label>
    <input type="text" v-model="user.lastName">

    <h3>{{fullName}}</h3>

    <!-- props 屬性 -->
    <h2>{{msg}}</h2>

  </div>
</template>

<script>
  export default {
    name: "test",
    props: {
      msg: {
        type: String,
        default: "默認值"
      }
    },
    // 實現數據
    data() {
      return {
        title: "Hello Vue js!",
        user: {
          firstName: "Hemin",
          lastName: "Wu"
        },
        showName: false,
        items: [
          {title: "item 1"},
          {title: "item 2"},
          {title: "item 3"}
        ]
      }
    },
    // 實現方法
    methods: {
      greet: function (greeting) {
        alert(greeting);
      },
      pressKey: function () {
        console.log("Pressed........");
      },
      enterHit: function () {
        console.log("you pressed enter key!!");
      }
    },
    computed: {
      fullName: function () {
        return this.user.firstName + this.user.lastName;
      }
    }
  }
</script>

<style scoped>
  /*scoped 只會影響當前組件樣式部分*/

</style>

Users.vue

<template>
  <div class="users">
    <h1>Users</h1>

    <!--添加用戶信息-->
    <form v-on:submit="addUser">
      <!-- v-model 綁定信息 輸入信息後會以數組形式保存在newUser對象-->
      <input type="text" v-model="newUser.name" placeholder="Enter name">
      <input type="text" v-model="newUser.email" placeholder="Enter eamil">
      <input type="submit" value="Submit">
    </form>

    <!--展示用戶信息-->
    <ul>
      <li v-for="user in users">
        <input type="checkbox" class="toggle" v-model="user.contacted">
        <span :class="{contacted:user.contacted}">
           {{user.name}}:{{user.email}}
          <button v-on:click="deleteUser(user)">X</button>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "users",
    // 實現數據
    data() {
      return {
        newUser: {},
        users: [
          {name: "Hemiah Wu", email: "[email protected]", contacted: false},
          {name: "Henry Wu", email: "[email protected]", contacted: false},
          {name: "Emily Wu", email: "[email protected]", contacted: false}
        ]
      }
    },
    // 實現方法
    methods: {
      addUser: function (e) {
        // console.log('hello');
        this.users.push({
          name: this.newUser.name,
          email: this.newUser.email,
          contacted: false
        });
        e.preventDefault();//取消默認事件，解決提交閃爍問題
      },

      deleteUser: function (user) {
        this.users.splice(this.users.indexOf(user), 1);
      }
    },

    created: function () {
      // console.log("Hello");

      // http請求 此處contacted: false失效
      this.$http.get("http://jsonplaceholder.typicode.com/users")
        .then(function (response) {
          // console.log(response.data);
          this.users = response.data;
        })
    }
  }
</script>

<style scoped>
  /*scoped 只會影響當前組件樣式部分*/

  .contacted {
    /*刪除線*/
    text-decoration: line-through;


  }
</style>

App.vue

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <!--components下的HelloWorld組件-->
    <!--<HelloWorld/>-->

    <!-- 修改props 屬性 -->
    <!--<test msg="新的屬性值"></test>-->
    <!--<Test/>-->

    <Users/>

  </div>
</template>

<script>
  // import HelloWorld from './components/HelloWorld'

  import Test from "./components/Test"
  import Users from "./Users";

  export default {
    name: 'App',
    components: {
      // HelloWorld
      // Test
      Users
    }
  }
</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>

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 Users from "./Users"
import Test from "./components/Test"
// 引入路由模塊
import VueRouter from "vue-router";

// 引入http請求模塊
import VueResource from 'vue-resource'

Vue.config.productionTip = false

// 使用路由模塊中間件
Vue.use(VueRouter);

// 使用http請求中間件
Vue.use(VueResource)

// 設置路由
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {path: "/", component: Users},
    {path: "/test", component: Test},
  ]

})


/* eslint-disable no-new */
new Vue({
  router,
  template:
    `
        <div id="app">
          <ul>
            <li>
              <router-link to="/">Users</router-link>
              <router-link to="/test">Test</router-link>
            </li>
          </ul>
          <router-view></router-view>
        </div>
    `,
  // el: '#app', // 對應index.html的容器id
  // template: '<App/>', // 組件App.vue
  // components: {App}  // 模板
}).$mount("#app")

未完待續，持續更新…