vue.js最最最基礎的入門案例

打算自己寫一點vue.js從入門到進階的筆記，方便一些新手從頭開始開發的時候，可以參考一下。

寫的或許是很簡單的文章，提供給新手參考。暫時都是一些入門級別的。

以后會慢慢的加深，進階，寫出一些更好，更完善，豐富的文章出來。

首先，要想寫vue.js項目，你需要下載好的node.js，你可以在控制台下輸入node -v查看nodejs版本，看看是否有安裝好node.js

我這里是v10.15.0的版本，已經下載安裝好了，具體的安裝步驟自己網上下載一下安裝包安裝一下就可以了。

然后開始創建vue項目

在創建項目前，可以使用一下一個鏡像，下載速度更快

使用國內的淘寶鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.org

然后輸入如下命令安裝好vue-cli

npm install -g vue-cli

使用命令 vue init webpack vue-demo 搭建vue項目, “vue-demo” 是你的項目名稱。

 

 配置一下需要安裝的vue環境

 

  以上步驟完成之后，項目目錄結構如下圖所示，其中的src目錄下的文件，就是我們自己需要使用到的文件了。

5） 執行 npm run dev 命令，啟動項目 

這時我們可以通過瀏覽器訪問鏈接 http://localhost:8080 來訪問項目了。這時頁面如下圖： 

 

 接着，我們添加一下自己寫的入門的一個vue頁面，功能就是從上面這個頁面跳轉到另一個vue頁面上去，

使用到了路由的跳轉，

1️⃣ 首先，在已經搭建好的環境的components下新建一個vue文件，作為我們自己的vue組件。 

 

 這里新建一個day01文件夾，里面創建一個HelloVue.vue文件

2️⃣ 然后在HelloVue.vue文件中添加以下代碼，vue文件的格式分為三個模塊，如下圖所示，首先時template模板，然后是script標簽及代碼，最后是style樣式

<template>
  <div id="vue">Hello Vue.js! {{ message }}</div>
</template>

<script type="text/javascript">
  export default { 
    name: "HelloVue",
    data (){ 
      return {
        message: "你好啊！！"
      }
    }
  }
</script>

<style type="text/css">
  #vue{
    color: green;
    font-size: 28px;
  }
</style>

3️⃣在項目搭建時生成的HelloWorld.vue文件中的template中添加一個鏈接，用於跳轉至我們自己的組件內容。 

<h1>
<router-link to="day01">跳轉至HelloVue</router-link>
</h1>

這里有一個要注意的細節部分，那就是這段代碼要寫在全局最外層的<div>里面，因為vue.js只有支持一個<div>，否則寫在<div>外面就沖突了

4️⃣ 接着，我們修改項目中的router目錄下的index.js文件，這是一個vue-router的簡單應用。對於路由，我們一般會想到寬帶安裝時我們使用的路由器，這里的路由主要是為了定義頁面之前的跳轉。在router下的index.js文件中添加以下代碼： 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloVue from '@/components/day01/HelloVue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
	{
	  path: '/day01',
	  name: 'HelloVue',
	  component: HelloVue
	}
  ]
})

　5️⃣ 刷新一下瀏覽器就可以看到結果了

 

 點擊跳轉至HelloVue 

 進入到新頁面

 

 

好了，這一次的練習就到這里了，下一次會進行一個更有趣的練習，期待下一次的見面啦。