Installation2019-04-15 22:23

VueJS: Installation

CDN 或者发布包引用

<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: {
      seentrue
    }
  })
  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: {
      reverseMessagefunction () {
        // 这个方法的目的是更新 message
        this.message = this.message + '123'
      }
    }
  })
  var app6 = new Vue({
    el'#app-6',
    data: {
      message'Hello Vue!'
    }
  })
</script>

命令行的使用方式

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

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

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

Vue CLI 的解决方案

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

# 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
Powered by Remix
|
Designed by szhshp
|
Copyright © szhshp 2022