使用vue-cli搭建SPA項目

使用vue-cli搭建SPA項目的前提就是搭建好NodeJS

NodeJS搭建指路：http://www.javashuo.com/article/p-knwzxckw-bp.html

 

什麼是vue-cli?

   vue-cli是vue.js的腳手架，用於自動生成vue.js+webpack的項目模板，建立命令以下：           

   vue init webpack xxx                    

 

   注1：xxx 爲本身建立項目的名稱

   注2：必須先安裝vue,vue-cli，webpack，node等一些必要的環境

 

 

 安裝vue-cli

 

   npm install -g vue-cli

 

 

 

  安裝成功後，會出現以下文件

 

     

 

 

安裝完成以後打開命令窗口並輸入 vue -V（注意這裏是大寫的「V」），若是出現相應的版本號，則說明安裝成功。

 

使用腳手架vue-cli(2.X版)來構建項目

 

  vue init webpack spa1               

     此命令用於建立SPA項目，它會在當前目錄生成一個以「spa1」命名的文件夾

 

     spa1即爲項目名，項目名不能用中文或大寫字母，而後終端會出現「一問一答」模式

 

 

   「一問一答」模式：

 

         1.Project name：項目名，默認是輸入時的那個名稱spa1，直接回車

 

         2.Project description：項目描述，直接回車

 

         3.Author：做者，隨便填或直接回車

 

         4.Vue build：選擇題，通常選第一個

 

           4.1Runtime + Compiler: recommended for most users//運行加編譯，官方推薦，就選它了

 

           4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files

 

              - render functions are required elsewhere//僅運行時，已經有推薦了就選擇第一個了

 

         5.Install vue-router：是否須要vue-router，Y選擇使用，這樣生成好的項目就會有相關的路由配置文件

 

         6.Use ESLint to lint your code：是否用ESLint來限制你的代碼錯誤和風格。N  新手就不用了，但實際項目中通常都會使用，這樣多人開發也能達到一致的語法

 

         7.Set up unit tests：是否安裝單元測試 N

 

         8.Setup e2e tests with Nightwatch?：是否安裝e2e測試  N

 

         9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)

 

           > Yes, use NPM                    

 

             Yes, use Yarn

 

             No, I will handle that myself     //選擇題：選第一項「Yes, use NPM」是否使用npm install安裝依賴

 

 

 

        所有選擇好回車就進行了生成項目，出現以下內容表示項目建立完成

 

        # Project initialization finished!

 

運行完上面的命令後，咱們須要將當前路徑改變到SPA這個文件夾內，而後安裝須要的模塊

 

   cd spa1                                  #改變路徑到spa1文件夾下

   npm install                              #安裝全部項目須要的npm模塊

 

啓動並訪問項目：

 npm run dev

項目啓動成功後，打開瀏覽器輸入「http://localhost:8080」便可

 

 

 

中止項目添加element-ui模塊：

 npm install element-ui -S 

 

這樣項目就算構建好了

 

接下來看一個案例：

index.js:

 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/views/About'
import UserInfo from '@/views/UserInfo'
import UserDetail from '@/views/UserDetail'
import UserPwd from '@/views/UserPwd'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
        {
          path: '/About',
          name: 'About',
          component: About
        },
        {
          path: '/UserInfo',
          name: 'UserInfo',
          component: UserInfo,
            children:[
                {
                  path: '/UserDetail',
                  name: '/UserDetail',
                  component: UserDetail
                },
                {
                  path: '/UserPwd',
                  name: '/UserPwd',
                  component: UserPwd
                }
            ]
        }
  ]
})

 

about.vue：

<template>
    <div>
        博主我的事蹟
        
    </div>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

UserDetail.vue：

<template>
    <div>
        詳情
        
    </div>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

UserInfo.vue：

<template>
    <div>
        <div class="hello">
            <router-link to="/UserDetail">我的詳情</router-link>
            <router-link to="/UserPwd">修改密碼</router-link>
            <router-view/>
        </div>
        
    </div>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

UserPwd.vue：

<template>
    <div>
        修改密碼
        
    </div>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

App.vue：

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
        <router-link to="/About">about me</router-link>
        <router-link to="/UserInfo">我的信息</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

 

這樣就能夠實現不一樣組件之間的跳轉