新手vue構建單頁面應用實例

時間 2019-12-08

標籤新手 vue 構建頁面應用實例简体版

原文原文鏈接

本人寫的小程序，功能還在完善中，歡迎掃一掃提出寶貴意見！css

步驟：html

1.使用vue-cli建立項目
2.使用vue-router實現單頁路由
3.用vuex管理咱們的數據流
4.使用vue-resource請求咱們的node服務端
5.使用.vue文件進行組件化的開發vue

1、目錄結構：node

2、搭建項目webpack

需先安裝淘寶鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.orggit

Mac安裝 vue-cli： sudo npm install -g vue-cligithub

Windows 安裝 vue-cli：npm install -g vue-cliweb

構建初始化項目：vue init webpack project（建立webpack項目並下載依賴）vue-router

輸入命令進入項目： cd project vuex

安裝依賴： npm install

npm i

開始運行： npm run dev (或輸入http://localhost:8080)，在熱加載中運行咱們的應用

它會去找到package.json的scripts對象，執行node bulid/dev-server.js

在這文件裏，配置了Webpack，會讓它去編譯項目文件，而且運行服務器。

這些都準備好後，咱們須要爲咱們的路由、XHR請求、數據管理下載三個庫，咱們能夠從vue的官網中找到他們。另外咱們使用bootstrap做爲個人UI庫：

npm i vue-resource vue-router vuex bootstrap --save

3、項目開始

初始化項目（main.js）

查看咱們的應用文件，咱們能夠在src目錄下找到App.vue和main.js文件中，咱們引入Vue和App，且建立了一個vue的實例（由於在router這行引入了App組件router.start(App,'#app')）

import Vue from 'vue'
import App from './App'
import router from './router'

import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

index.html

<body>
    <div id="app"></div>
  </body>

App.vue

<template>
  <div id="app">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header">
          <h2>Router Basic - 01</h2>
        </div>
      </div>
    </div>
    <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
          <ul class="list-group">
            <!--使用指令v-link進行導航-->
            <a class="list-group-item"><router-link to="/home">Home</router-link></a>
            <a class="list-group-item"><router-link to="/about">About</router-link></a>
            <a class="list-group-item"><router-link to="/contact">Contact</router-link></a>
          </ul>
        </div>
        <div class="col-xs-6">
          <div class="panel">
            <div class="panel-body">
              <!--用於渲染匹配的組件-->
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

// src/components/Home.vue 做爲咱們的首頁

<template id="contact">
  <div>
    <h1>Home</h1>
    <p>This is the tutorial about Contact.</p>
  </div>
</template>

<script>
export default {
  '/hello': 'Hello'
}
</script>

// src/components/About.vue

<template id="about">
    <div>
        <h1>About</h1>
        <p>This is the tutorial about vue-router.</p>
    </div>
</template>
<script>
export default {
  '/about': 'About'
}
</script>

// src/components/Contact.vue

<template id="contact">
    <div>
        <h1>Contact</h1>
        <p>This is the tutorial about Contact.</p>
    </div>
</template>

export default {
  '/contact': 'contact'
}
</script>

// src/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Home from '@/components/Home'
import About from '@/components/About'
import Contact from '@/components/Contact'
import 'bootstrap/dist/css/bootstrap.css'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: '/Contact',
      component: Contact
    }
  ]
})

查看項目

詳細操做：