Installation
文章目录

VueJS: Installation

CDN 或者发布包引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<h1>简单渲染</h1>
<div id="app">
  {{ message }}
</div>
<h1>参数的使用</h1>
<div id="app-2">
  <span v-bind:title="message">
    输入 app2.message = 'abc' 然后这个 span 的鼠标悬停提示会改变
  </span>
</div>
<h1>条件控制</h1>
<div id="app-3">
  <p v-if="seen">条件显示, 控制台输入 app3.seen = false 后这条消息会消失</p>
</div>
<h1>列表渲染</h1>
<div id="app-4">
  列表渲染, 输入 app4.todos.push({ text: '新项目' }) 试试
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
<h1>绑定方法</h1>
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="列表渲染">点击这个按钮就会执行方法</button>
</div>
<h1>数据双向绑定</h1>
<span>这里同时两个地方用到了 message 的数据</span>
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>


<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello World!'
    }
  })
  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: '页面加载于 ' + new Date().toLocaleString()
    }
  })
  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })
  var app4 = new Vue({
    el: '#app-4',
    data: {
      todos: [{
          text: '学习 JavaScript'
        },
        {
          text: '学习 Vue'
        },
        {
          text: '整个牛项目'
        }
      ]
    }
  })
  var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function () {
        // 这个方法的目的是更新 message
        this.message = this.message + '123'
      }
    }
  })
  var app6 = new Vue({
    el: '#app-6',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

命令行的使用方式

不用浪费时间,直接使用官方的模板就可以

1
2
3
4
5
6
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.

最终会配置完一个很完善的并且带有 router 的项目

Vue CLI 的解决方案

这仅仅对应 Vue CLI V2, 可以通过 vue -version 查看版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Ensure Vue CLI is installed and up to date
npm i -g vue-cli

# Initialize a BootstrapVue project in the directory 'my-project'
vue init bootstrap-vue/webpack-simple my-project

# Change into the directory
cd my-project

# Install dependencies
npm i

# Fire up the dev server with HMR
npm run dev