一.Vue-cli介紹

1.Vue-cil理解

Vue CLI 是一個(gè)基于 Vue.js 開(kāi)發(fā)的官方腳手架工具，用于快速搭建 Vue.js 項(xiàng)目的開(kāi)發(fā)環(huán)境。它提供了一套完整的項(xiàng)目構(gòu)建工具鏈，包括初始化項(xiàng)目、本地開(kāi)發(fā)服務(wù)器、構(gòu)建生產(chǎn)版本等功能，大大簡(jiǎn)化了 Vue.js 項(xiàng)目的開(kāi)發(fā)流程。

2.Vue-cli主要特點(diǎn)和功能：

快速原型開(kāi)發(fā)：Vue CLI 提供了一個(gè)交互式的腳手架，能夠快速創(chuàng)建一個(gè)基本的 Vue.js 項(xiàng)目，并且內(nèi)置了開(kāi)發(fā)服務(wù)器和實(shí)時(shí)重載功能，方便開(kāi)發(fā)者進(jìn)行原型開(kāi)發(fā)和實(shí)時(shí)調(diào)試。

插件化擴(kuò)展：Vue CLI 支持通過(guò)插件機(jī)制擴(kuò)展其功能。官方提供了一系列官方插件，如路由管理、狀態(tài)管理等，同時(shí)也支持第三方插件的使用。

集成了現(xiàn)代化的前端工具：Vue CLI 集成了許多現(xiàn)代化的前端工具，如 Webpack、Babel 等，可自動(dòng)處理代碼轉(zhuǎn)譯、模塊打包、靜態(tài)資源管理等任務(wù)，提高了開(kāi)發(fā)效率。

支持自定義配置：Vue CLI 提供了一種簡(jiǎn)潔易用的配置文件格式（vue.config.js）來(lái)管理不同的構(gòu)建配置選項(xiàng)，使開(kāi)發(fā)者能夠靈活地定制自己項(xiàng)目的構(gòu)建配置。

支持多環(huán)境配置：Vue CLI 支持在不同的環(huán)境下進(jìn)行構(gòu)建，如開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境和生產(chǎn)環(huán)境，并且可以輕松地切換環(huán)境變量和相關(guān)配置，方便進(jìn)行不同環(huán)境的部署和測(cè)試。

總之，Vue CLI 是一個(gè)強(qiáng)大的腳手架工具，為 Vue.js 項(xiàng)目提供了一整套的開(kāi)發(fā)工具鏈，使開(kāi)發(fā)者能夠更高效、更便捷地進(jìn)行 Vue.js 項(xiàng)目的開(kāi)發(fā)和構(gòu)建。

3.應(yīng)用場(chǎng)景

單頁(yè)面應(yīng)用（SPA）開(kāi)發(fā)：Vue CLI 提供了快速創(chuàng)建 Vue.js 單頁(yè)面應(yīng)用的能力，包括路由管理、狀態(tài)管理等功能，方便開(kāi)發(fā)者快速搭建和開(kāi)發(fā)前端項(xiàng)目。

前端原型開(kāi)發(fā)：Vue CLI 的快速原型開(kāi)發(fā)功能使開(kāi)發(fā)者能夠快速創(chuàng)建一個(gè)基本的 Vue.js 項(xiàng)目，并且內(nèi)置了開(kāi)發(fā)服務(wù)器和實(shí)時(shí)重載功能，方便進(jìn)行前端原型驗(yàn)證和交互開(kāi)發(fā)。

多人協(xié)作開(kāi)發(fā)：Vue CLI 提供了一套統(tǒng)一的項(xiàng)目結(jié)構(gòu)和規(guī)范，使得團(tuán)隊(duì)中的開(kāi)發(fā)者可以方便地協(xié)同開(kāi)發(fā)，并且內(nèi)置了代碼規(guī)范檢查工具，幫助團(tuán)隊(duì)保持一致的開(kāi)發(fā)風(fēng)格和規(guī)范。

多環(huán)境配置和部署：Vue CLI 支持在不同的環(huán)境下進(jìn)行構(gòu)建和部署，如開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境和生產(chǎn)環(huán)境，可以方便地切換環(huán)境變量和相關(guān)配置，提高項(xiàng)目的可維護(hù)性和部署效率。

項(xiàng)目構(gòu)建與優(yōu)化：Vue CLI 集成了現(xiàn)代化的前端工具鏈，如 Webpack、Babel 等，可以自動(dòng)處理代碼轉(zhuǎn)譯、模塊打包、靜態(tài)資源管理等任務(wù)，方便進(jìn)行項(xiàng)目構(gòu)建和優(yōu)化。

需要注意的是，Vue CLI 更適合于中大型前端項(xiàng)目的開(kāi)發(fā)和構(gòu)建，對(duì)于簡(jiǎn)單的靜態(tài)頁(yè)面或小型項(xiàng)目，可能會(huì)顯得過(guò)于繁瑣。在選擇使用 Vue CLI 前，建議根據(jù)項(xiàng)目規(guī)模和需求進(jìn)行評(píng)估和選擇。

二. Vue-cil部署spa項(xiàng)目實(shí)戰(zhàn)

1.安裝Vue-cil（通過(guò)cmd）

npm install -g vue-cli
npm install webpack -g

效果展示

安裝完成之后打開(kāi)命令窗口并輸入 vue -V（注意這里是大寫(xiě)的“V”），如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功。 

2.使用腳手架vue-cli(2.X版)來(lái)構(gòu)建項(xiàng)目 

打開(kāi)網(wǎng)頁(yè)·開(kāi)發(fā)工具的工作區(qū)間在路徑上面輸入cdm打開(kāi)控制窗口

在輸入    vue init webpack 項(xiàng)目名字

3.在輸入項(xiàng)目名字后來(lái)到'一問(wèn)一答模式'

1.Project name：項(xiàng)目名，默認(rèn)是輸入時(shí)的那個(gè)名稱(chēng)spa1，直接回車(chē)

2.Project description：項(xiàng)目描述，直接回車(chē)

3.Author：作者，隨便填或直接回車(chē)

4.Vue build：選擇題，一般選第一個(gè)

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

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//僅運(yùn)行時(shí)，已經(jīng)有推薦了就選擇第一個(gè)了

5.Install vue-router：是否需要vue-router，Y選擇使用，這樣生成好的項(xiàng)目就會(huì)有相關(guān)的路由配置文件

6.Use ESLint to lint your code：是否用ESLint來(lái)限制你的代碼錯(cuò)誤和風(fēng)格。N  新手就不用了，但實(shí)際項(xiàng)目中一般都會(huì)使用，這樣多人開(kāi)發(fā)也能達(dá)到一致的語(yǔ)法

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

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

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

項(xiàng)目構(gòu)建成功

 導(dǎo)入項(xiàng)目在開(kāi)發(fā)軟件中 

啟動(dòng)項(xiàng)目

4.項(xiàng)目包的功能介紹

三.實(shí)戰(zhàn)演練

1.使用路由

1.1.定義組件

在components文件夾里面，新建你需要的vue文件

1.2.定義容器

vue文件里面的<template>里面，有且只能有一個(gè)根節(jié)點(diǎn)

<template>
  <div class="Center">
    這是網(wǎng)站首頁(yè)，活動(dòng)方式
  </div>
</template>
<script>
  export default {
    name: 'Center',
    data() {
      return {
        msg: '阿斯頓法國(guó)紅酒看來(lái)'
      }
    }
  }
</script>
<style>
</style>

<template>
  <div class="About">
    這是關(guān)于網(wǎng)頁(yè)
  </div>
</template>
  <script>
    export default {
      name: 'About',
      data() {
        return {
          msg: '1234567890'
        }
      }
    }
  </script>
  <style>
  </style>

1.3.組裝成路由器

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Center from '@/components/Center'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
  routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Center',
      name: 'Center',
      component: Center
    },
    {
      path: '/About',
      name: 'About',
      component: About
    }
  ]
})

1.4.測(cè)試

2.嵌套路由

2.1定義組件

在components文件夾里面，新建你需要的vue文件

2.2定義容器

vue文件里面的<template>里面，有且只能有一個(gè)根節(jié)點(diǎn)

<template>
  <div>
    關(guān)于本站創(chuàng)始人
  </div>
</template>
  <script>
    export default {
      name: 'AboutMe',
      data() {
        return {
          msg: '1234567890'
        }
      }
    }
  </script>
<style>
</style>

<template>
  <div>
    關(guān)于本站
  </div>
</template>
  <script>
    export default {
      name: 'AboutWeb',
      data() {
        return {
          msg: '1234567890'
        }
      }
    }
  </script>
<style>
</style>

2..3.組裝成路由器

<template>
  <div class="About">
   <router-link to="AboutMe">關(guān)于站長(zhǎng)</router-link>
   <router-link to="AboutWeb">關(guān)于網(wǎng)站</router-link>
   <router-view></router-view>
  </div>
</template>
  <script>
    export default {
      name: 'About',
      data() {
        return {
          msg: '1234567890'
        }
      }
    }
  </script>
  <style>
  </style>

2.4.測(cè)試

 到此這篇關(guān)于Vue-cli搭建spa項(xiàng)目的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)Vue-cli搭建spa項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論