前言

Vue CLI（Vue Command Line Interface）是一個用于快速搭建基于Vue.js的前端項目的工具。它是Vue.js官方提供的一個腳手架工具，旨在簡化Vue.js項目的開發(fā)過程。Vue CLI提供了一些強大的功能，幫助開發(fā)者輕松創(chuàng)建、開發(fā)和構(gòu)建Vue.js應(yīng)用程序

Vue CLI的主要特點和功能：

1. 快速創(chuàng)建項目： Vue CLI允許開發(fā)者通過命令行輕松創(chuàng)建新的Vue.js項目，包括配置文件、目錄結(jié)構(gòu)和一些默認的依賴項。

2. 開發(fā)服務(wù)器： Vue CLI集成了一個開發(fā)服務(wù)器，可以在開發(fā)過程中實時預(yù)覽應(yīng)用程序的變化。這意味著你可以在開發(fā)過程中立即看到你的修改，無需手動刷新瀏覽器。

3. 插件系統(tǒng)： Vue CLI支持插件系統(tǒng)，可以通過插件擴展項目的功能。這使得集成各種工具和庫變得更加容易，例如添加路由管理、狀態(tài)管理或國際化等。

4. 配置文件： Vue CLI提供了一個配置文件（vue.config.js），允許你對構(gòu)建和開發(fā)過程進行高度定制。你可以在配置文件中設(shè)置構(gòu)建選項、代理、自定義Webpack配置等。

5. Vue CLI UI： 除了命令行界面，Vue CLI還提供了一個圖形用戶界面（Vue CLI UI），使得配置和管理項目變得更加直觀和用戶友好。

6. 內(nèi)置構(gòu)建工具： Vue CLI集成了現(xiàn)代的前端構(gòu)建工具，如Webpack和Babel，以便優(yōu)化和打包你的應(yīng)用程序，以便在生產(chǎn)環(huán)境中使用。

總之，Vue CLI是一個強大的工具，可幫助開發(fā)者更輕松地創(chuàng)建、開發(fā)和部署Vue.js應(yīng)用程序。它使得Vue.js項目的管理和配置變得更加簡單，用于自動生成vue.js+webpack的項目模板

一.環(huán)境搭建

1.首先安裝vue-cli

在cmd窗口中輸入以下命令

npm install -g vue-cli

驗證是否安裝成功

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

2.使用腳手架創(chuàng)建項目骨架?

（1）進入要創(chuàng)建項目的目錄

cmd命令：cd 項目路徑

或者是直接在要創(chuàng)建的目錄的地址欄輸入cmd命令直接進入

（2）cmd窗口輸入命令創(chuàng)建項目

vue init webpack 項目名

?

cmd命令行窗口顯示中文亂碼，多是因為cmd命令行窗口字符編碼不匹配導(dǎo)致

修改cmd窗口字符編碼為UTF-8，命令行中執(zhí)行：chcp 65001

切換回中文：chcp 936

這兩條命令只在當(dāng)前窗口生效，重啟后恢復(fù)之前的編碼

（3）一問一答模式

?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//僅運行時，已經(jīng)有推薦了就選擇第一個了

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

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

?????????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安裝依賴

?

????????全部選擇好回車就進行了生成項目，出現(xiàn)如下內(nèi)容表示項目創(chuàng)建完成

當(dāng)出現(xiàn)以下界面才能說明安裝成功了

?（4）啟動項目

cd 剛剛創(chuàng)建的項目名

然后輸入以下命令啟動項目

?npm run dev

?出現(xiàn)以上界面說明創(chuàng)建成功

通過瀏覽器訪問地址

二.?spa項目入門

1.vue項目結(jié)構(gòu)說明

? build文件夾：?這個文件夾主要是進行webpack的一些配置

???config文件夾

???node_modules文件夾 ：存放npm install時根據(jù)package.json配置生成的npm安裝包的文件夾

???src文件夾：源碼目錄(開發(fā)中用得最多的文件夾)

2.?什么是*.vue文件

???*.vue?文件，是一個自定義的文件類型，用類似HTML的語法描述一個Vue組件。

???每個.vue文件包含三種類型的頂級語言塊?<template>, <script>?和?<style>。

???這三個部分分別代表了?html,js,css。

注1：不能直接把html代碼包裹在<template></template>中，而是必須在里面方置一個html標(biāo)簽來包裹所有的代碼

????????一般情況是使用<div></div>標(biāo)簽包含其它的代碼(保證只有一個根元素)

?????????<template>

???????????<div>...</div>

?????????</template>

???注2：js代碼寫在<script>標(biāo)簽中，并通過export導(dǎo)出

????????<script>

??????????export default {

?????????????name: 'App'

??????????}

????????</script>

3.嵌套路由案例演示

3.1定義基本路由

（1）模板文件

<router-link to="/Home">首頁</router-link>
<router-link to="/About">關(guān)于</router-link>

（2）路由

在主路由中

{
      path: '/Home',
      name: 'Home',
      component: Home
    },
    {
      path: '/About',
      name: 'About',
      component: About
    },

3.2 定義子路由

在當(dāng)前主路由中配置子路由

{
      path: '/About',
      name: 'About',
      component: About,
      children:[
        {
          {
            path: '/AboutMe',
            name: 'AboutMe',
            component: AboutMe
          },
          {
            path: '/AboutWebsite',
            name: 'AboutWebsite',
            component: AboutWebsite
          },
        }
      ]
    },

3.3分別定義兩個子路由的模板文件

<template>
  <div>
    關(guān)于本站介紹內(nèi)容
  </div>
</template>

<script>
  export default {
    name: 'AboutWebsite',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<template>
  <div>
    關(guān)于站長
  </div>
</template>

<script>
  export default {
    name: 'AboutMe',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

3.4在主路由中掛載內(nèi)容

<template>
  <div>
    <router-link to="/AboutMe">關(guān)于本站</router-link>
    <router-link to="/AboutWebsite">關(guān)于站長</router-link>
    <router-view></router-view>
  </div>
</template>

測試效果

?

今天的分享到這里就結(jié)束了，感謝各位大大的觀看，各位大大的三連是博主更新的動力，感謝謝謝謝謝謝謝謝謝各位的支持?。。。?！?

文章來源地址http://www.zghlxwxcb.cn/news/detail-731247.html

到了這里，關(guān)于Vue-cli搭建SPA項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！