一.Vue-cli介紹

1.Vue-cil理解

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

2.Vue-cli主要特點和功能：

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

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

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

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

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

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

3.應(yīng)用場景

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

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

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

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

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

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

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

1.安裝Vue-cil（通過cmd）

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

效果展示

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

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

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

在輸入    vue init webpack 項目名字

3.在輸入項目名字后來到'一問一答模式'

1.Project name：項目名，默認(rèn)是輸入時的那個名稱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//僅運行時，已經(jīng)有推薦了就選擇第一個了

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

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

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

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

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

項目構(gòu)建成功

 導(dǎo)入項目在開發(fā)軟件中 

啟動項目

4.項目包的功能介紹

三.實戰(zhàn)演練

1.使用路由

1.1.定義組件

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

1.2.定義容器

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

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

<template>
  <div class="About">
    這是關(guān)于網(wǎng)頁
  </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.測試

2.嵌套路由

2.1定義組件

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

2.2定義容器

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

<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)于站長</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.測試

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

最新評論