nodejs - npm安装vue及应用

一、前言

前提：nodejs安装完毕，webpack安装完毕
工具：webstrom

二、过程

【1】安装脚手架

1】桌面新建vueapp文件夹，打开终端，安装vue-cli

npm install vue-cli@2.8.2 -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: "hemiah@gmail.com", contacted: false},
          {name: "Henry Wu", email: "henry@gmail.com", contacted: false},
          {name: "Emily Wu", email: "emily@gmail.com", 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")

未完待续，持续更新…