用 vue cli 腳手架搭建單頁面 Vue 應用（進階2）

一、配置 Node 環境。

自行百度吧。

安裝好了以後，打開 cmd 。運行 node -v 。顯示版本號，就是安裝成功了。

注：不要安裝8.0.0以上的版本，和 vue-cli 不兼容。

我使用的 6.10.3 的版本，相對穩定。

 

 

二、使用 npm 管理依賴

使用 node 自帶的包管理工具 npm 管理項目中的依賴，因爲 npm 的服務器在國外。常常會遇到速度奇慢或者下載不下來依賴的狀況，因此推薦使用淘寶鏡像。

npm install-g cnpm--registry=https://registry.npm.taobao.org

這樣咱們就可使用 cnpm 代替 npm 執行命令了。

  全局安裝 vue-cli 模塊。

cnpm install vue-cli -g

執行 vue -V （此處是大寫的 V），顯示版本號表示安裝成功。

 

 

三、建立項目

先到你的根目錄下，運行 cmd 。執行以下代碼，建立項目。

 vue init webpack <project name>

 

 

? Project name  輸入項目名稱

? Project description 輸入項目描述

? Author 做者

? Vue build 打包方式，回車就行了

? Install vue-router?  選擇  Y 使用 vue-router，輸入 N 不使用

? Use ESLint to lint your code? 代碼規範，推薦 N

? Setup unit tests with Karma + Mocha? 單元測試，推薦 N

? Setup e2e tests with Nightwatch? E2E測試，N

四、運行項目

好了，如今咱們已經創建好本身項目了。可是還沒初始化。

cd <project name>    // cd 你剛纔寫創建的項目名。進入。

cnpm install    // 初始化項目，安裝依賴。

 

 

到此項目已經初始化完畢了，咱們能夠執行以下命令查看。

cnpm run dev

 

 

五、構建路由

找到 src/router/index.js 打開。把它改爲以下這樣。

import Vue from 'vue'     // 引入 vue

import Router from 'vue-router'    // 引入 vur-router

import Hello from '@/components/Hello'    // 引入 Hello 模塊

import Home from '@/components/Home'    // 引入 Home 模塊

Vue.use(Router)     // 註冊 vue-router

export default new Router({

    routes: [

        {

            path: '/',

            name: 'Hello',

            component: Hello

       },

      {

           path:'/home',

           name:'home',

           component: Home

     ｝

    ]

})

到這一步，路由已經配置好了。可是咱們尚未home這個頁面。

找到 src/router/components/ 打開。

在裏面新建一個 Home.vue 。

打開改爲如下代碼。

<template>

    <h1>{{ text }}</h1>

</template>

<script>

export default {

    name: 'home',

    data () {

        return {

            text: 'this is homepage'

       }

    }

}

</script>

<style scoped>

</style>

到此，咱們的項目已經初始化完成了。切換路由/home就能夠看到咱們剛纔加入的頁面了。