文章首發(fā)于個(gè)人博客,轉(zhuǎn)載參考請注明來源用vue-cli快速搭建vue腳手架+實(shí)現(xiàn)vue頁面跳轉(zhuǎn)的小demo

一個(gè)簡單的 vue 頁面跳轉(zhuǎn)示例項(xiàng)目地址??

vue簡介

Vue (讀音 /vju?/香伴，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是术辐，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用育勺。Vue 的核心庫只關(guān)注視圖層拉庶，不僅易于上手贤笆，還便于與第三方庫或既有項(xiàng)目整合。另一方面谚殊，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)戈鲁，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動仇参。

Vue.js特點(diǎn)

• 簡潔： HTML 模板 + JSON 數(shù)據(jù)，再創(chuàng)建一個(gè) Vue 實(shí)例婆殿，就這么簡單诈乒。
• 數(shù)據(jù)驅(qū)動： 自動追蹤依賴的模板表達(dá)式和計(jì)算屬性。
• 組件化： 用解耦鸣皂、可復(fù)用的組件來構(gòu)造界面抓谴。
• 輕量： ~24kb min+gzip暮蹂，無依賴。
• 快速： 精確有效的異步批量 DOM 更新癌压。
• 模塊友好： 通過 NPM 或 Bower 安裝仰泻，無縫融入你的工作流。

Vue 提供了一個(gè)官方的 CLI滩届，為單頁面應(yīng)用 (SPA) 快速搭建繁雜的腳手架集侯。它為現(xiàn)代前端工作流提供了 batteries-included 的構(gòu)建設(shè)置。只需要幾分鐘的時(shí)間就可以運(yùn)行起來并帶有熱重載帜消、保存時(shí) lint 校驗(yàn)棠枉，以及生產(chǎn)環(huán)境可用的構(gòu)建版本。

搭建環(huán)境

node和npm的環(huán)境是必須的泡挺，npm和node的安裝不再贅述辈讶，自行解決即可。

npm 全稱：Node Package Manager娄猫，就是Node的包的一個(gè)管理工具贱除，是Node.js下的主流套件管理程式。

Node.js 用一句話來介紹就是：Node.js 是一個(gè)讓 JavaScript 運(yùn)行在服務(wù)端的開發(fā)平臺媳溺。

Webpack 是一個(gè)前端資源加載/打包工具月幌。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源悬蔽。

image

從圖中我們可以看出扯躺，Webpack 可以將多種靜態(tài)資源 js、css蝎困、less 轉(zhuǎn)換成一個(gè)靜態(tài)文件录语，減少了頁面的請求。

Vue.js 目錄結(jié)構(gòu)

image

目錄解析

1.全局安裝 webpack

請先確認(rèn)自己已經(jīng)安裝npm和node.js,使用npm全局安裝 webpack月洛，打開命令行工具輸入：npm install webpack -g,安裝完成后輸入webpack -v何恶，如果出現(xiàn)相應(yīng)版本號，則安裝成功

webpack 4.X 開始嚼黔，需要安裝 webpack-cli 依賴 ,所以使用這條命令 npm install webpack webpack-cli -g

2.全局安裝 vue-cli

在命令行輸入npm install -g vue-cli细层，安裝完成后輸入vue-V，如果出現(xiàn)相應(yīng)版本號隔崎，則安裝成功

3.使用vue-cli來構(gòu)建項(xiàng)目

首先新建一個(gè)文件夾作為項(xiàng)目存放地今艺，cd進(jìn)入其目錄，輸入以下命令創(chuàng)建項(xiàng)目vue init webpack vue-demo爵卒，模版下載成功后會有一些交互的項(xiàng)需要填寫

? Project name vue-demo # 項(xiàng)目名稱虚缎，直接回車，按照括號中默認(rèn)名字（注意這里的名字不能有大寫字母钓株，如果有會報(bào)錯(cuò)Sorry, name can no longer contain capital letters）实牡，阮一峰老師博客為什么文件名要小寫 ，可以參考一下轴合。
? Project description A Vue.js project # 項(xiàng)目描述,隨便寫
? Author # 作者名稱
? Vue build standalone # 我選擇的運(yùn)行加編譯時(shí)
    Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router创坞，路由肯定要的
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作為代碼規(guī)范.
? Pick an ESLint preset Standard # 一樣的ESlint 相關(guān)
? Set up unit tests Yes # 是否安裝單元測試
? Pick a test runner 按需選擇 # 測試模塊
? Setup e2e tests with Nightwatch? 安裝選擇 # e2e 測試
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我選的NPM

安裝成功后受葛，cd進(jìn)入項(xiàng)目目錄题涨，執(zhí)行命令npm install進(jìn)行初始化，安裝我們的項(xiàng)目依賴包总滩，也就是安裝package.json里的包纲堵。

4.運(yùn)行項(xiàng)目

命令行執(zhí)行npm run dev

打開瀏覽器訪問 http://localhost:8080 就能看到歡迎頁面，若頁面加載不出來可能是本地8080端口被占用闰渔，需要修改一下配置文件config里的index.js的post即可

image

5.vue-cli 的 webpack 配置

從 package.json 可以看到 開發(fā) 和 生產(chǎn) 環(huán)境的入口席函。

image

• dev 是開發(fā)環(huán)境的啟動命令
• build 是生產(chǎn)打包環(huán)境的命令
• lint 是ESLint的檢查命令 在 --ext 前加一個(gè) --fix 可以自動修復(fù)不符合規(guī)范的代碼

打包上線：運(yùn)行 npm run build 命令，就可以進(jìn)行打包工作了冈涧，打包完成后茂附，會生成 dist 目錄正蛙，項(xiàng)目上線時(shí)，把dist 目錄下的文件放到服務(wù)器就可以了

在谷歌商店搜索調(diào)試工具 vue-tool 安裝到瀏覽器营曼，調(diào)試項(xiàng)目很好用

vue項(xiàng)目實(shí)現(xiàn)頁面跳轉(zhuǎn)

假設(shè)現(xiàn)在有兩個(gè)頁面 HelloWorld 和 Registered 乒验，路由配置在 src/router/index.js 中

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

Vue.use(Router)

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

頁面 HelloWorld

<template>
  <div class="hello">
    <h1>密碼登錄</h1>
    <input placeholder="請輸入用戶名" type="text" name="userName"/>
    <br><br>
    <input placeholder="請輸入密碼" type="text" name="passWord"/>
    <br><br>
    <input type="submit" value="登錄" />
    <button @click="go">點(diǎn)我跳轉(zhuǎn)</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      msg1: 'hello my app'
    }
  },

  methods:{
    go(){
        this.$router.push('/Registered')
    }
  }
}
</script>

頁面 Registered

<template>
  <div class="hello">
    <h1>我是Registered</h1>
    <button @click="back">點(diǎn)我返回</button>
  </div>
</template>

<script>
export default {
  name: 'Registered',
  data () {
    return {
    }
  },

  methods:{
    back(){
        this.$router.push('/')
    }
  }
}
</script>

在HelloWorld中點(diǎn)擊按鈕跳轉(zhuǎn)到Registered，在Registered中點(diǎn)擊按鈕也可以返回到HelloWorld溶推，實(shí)現(xiàn)的效果如下圖:

HelloWorld 頁面

image

image

項(xiàng)目地址

戳這里 ??