Vue脚手架First
1. Vue腳手架
Vue腳手架是一個開發基于Vue框架的前端項目的軟件。
Vue腳手架的項目是“單頁面”的，也就是在這樣的項目，只有1個HTML頁面，它認為頁面是由多個模塊組成的，各個模塊都是可以隨時替換的，從而顯示出不同的頁面效果。
2. 關于Node.js
首先,需要安裝Node.js軟件，下載得到安裝后直接安裝即可，安裝過程中沒有需要特別關注的部分。
安裝完成后，可以通過npm -v命令查看安裝的npm軟件的版本，順便檢查是否安裝成功。
以上安裝Node.js主要是為了使用npm(Node Package Management)，通常，應該修改“npm源”，以使得其下載軟件將從配置的站點進行下載：
npm config set registry https://registry.npm.taobao.org執行以上命令默認沒有任何反饋，可以通過以下命令查看配置的值：
npm config get registry3. 安裝Vue CLI
Vue腳手架軟件稱之為：Vue CLI
通過npm命令可以安裝此軟件：
npm install -g @vue/cli以上安裝過程可能會提示WARN字樣，可以無視，只要以上命令可以正常執行結束，并沒有任何ERR字樣的提示，即為成功！
安裝Vue CLI主要是為了創建項目并管理項目(例如啟動項目)。
4. 創建項目
首先，準備用于存放Vue腳手架項目的文件夾（任何你找得到的地方，不推薦操作系統的敏感文件夾），并且，在命令提示符窗口（或者終端窗口）中進入此文件夾。
然后，通過vue命令（來自前一步安裝的@vue/cli）來創建項目，命令的基本格式是vue create 項目名稱，例如：
vue create jsd2205-web-client-teacher
注意：執行創建項目的命令后，可能會有一點卡頓，此時不可以反復按回車鍵！
注意：如果創建項目的過程中選擇錯誤，可以通過按下CTRL + C終止，并重新創建！
在創建選項中，需要選擇”
Manually select features：手動選擇功能 Babel / Vuex / Router 2.x Y In package.json N接下來，會自動完成項目的創建，在創建結束后，如果信息中沒有錯誤，且出現了Successfully created project 項目名稱.的字樣，則創建成功！
如果創建項目失敗，應該先刪除已經創建的項目的文件夾，然后檢查npm源，確認無誤后，再次執行vue create 項目名稱命令來重新創建項目。
5. 啟動項目
當項目創建成功后，可以通過IntelliJ IDEA打開此項目。
在IntelliJ IDEA中，打開Terminal窗口，默認的提示符的位置應該就是當前項目的文件夾，在此處執行命令即可啟動項目：
npm run serve當啟動成功后，可以看到Compiled successfully in 7859ms字樣。
提示：啟動成功后，會提示訪問此項目的URL，例如：http://localhost:8080，根據當前計算機的網絡配置不同，接下來的其它URL提示可能不同，均可無視。
在瀏覽器中，可以通過http://localhost:8080來訪問此項目。
在Vue CLI項目中，默認的視圖文件（頁面文件）在src/views文件夾中。默認的項目中，負責顯示的是：
每個視圖文件都是以.vue作為擴展名的，每個文件都可以有3個根標簽：
<template>：用于設計頁面，例如頁面中有哪些標簽、顯示什么內容等，注意：此標簽的直接子級標簽必須有且僅有1個！ <style>：【可選】用于設計樣式，此標簽下的都是CSS代碼 <script>：【可選】用于編寫JavaScript代碼7. 關于路由
Vue CLI的“路由”是一種配置了“訪問路徑”與“視圖組件”的對應關系的對象！
路由是通過src/router/index.js文件的routes常量進行配置的，默認的代碼是：
const routes = [{path: '/about',name: 'home',component: HomeView},{path: '/',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AdminIndexView.vue')} ]以上routes常量的類型是數組，數組的元素是一個個的對象，以上代碼中各對象配置了：
path：訪問路徑
name：名稱，并不是必須的
component：視圖組件，配置此屬性時，視圖組件有2種加載模式，分別是“預加載”和“懶加載”，其中，預加載需要通過當前文件頂部的import語句導入視圖，而懶加載則是直接配置此屬性時，直接使用箭頭函數加上import函數進行配置即可，通常，在每個項目中，應該有且僅有1個視圖是預加載的
【練習】在項目中添加“登錄”頁面（不需要具體的設計頁面內容）
操作步驟：
創建新的視圖文件
在src/views下創建LoginView.vue，并隨意設計頁面內容
配置此視圖的路由
在src/router/index.js中的routes數組常量中添加新的數組元素，配置path值為/login，配置component值為() => import(‘…/views/LoginView.vue’)
提示：完成此步驟后，就已經可以通過 http://localhost:8080/login 訪問到新添加的登錄頁面
在App.vue中添加新的鏈接（從功能上來說，并不是必須的）
參考原有代碼進行添加即可
8. 關于
在設計視圖時，使用<router-view>則表示：當前視圖文件（例如默認的App.vue）不處理此部分的顯示，將根據訪問路徑來決定由哪個視圖進行顯示（取決于src/router/index.js中routes常量的配置）！
[node_modules]：當前項目的依賴項（各依賴的框架、工具包對應的文件，類似于Maven所需的本地倉庫），注意：通常，從GIT等位置獲取的項目，將沒有此文件夾及相關文件，則項目不可以直接運行！需要先執行npm install以安裝當前項目必須的軟件，才可以執行npm run serve來啟動項目！
[public]：靜態資源文件夾，通常用于存放圖片、.css、.js等文件
favicon.ico：網站的圖標文件，必須在此位置，必須是此文件名
index.html：是VUE Cli項目中唯一的HTML文件，通常，不建議修改
[src]：源文件的文件夾，此文件夾下的內容將會被編譯后再用于執行
[assets]：資源文件夾，只能存放不會因為程序而發生變化的資源文件（例如：某張圖片會因為js代碼而改變顯示狀態，則此圖片不可以放在此文件夾中）
[components]：存放可能共用的視圖組件的文件夾，此處的視圖組件可以理解是被封裝后的視圖部分，可以被其它的視圖組件引用
[router]：存放路由配置文件的文件夾
index.js：默認的路由配置文件
[store]：存放共享變量的文件夾
index.js：默認的存放共享變量的文件夾
[views]：存放視圖組件（.vue文件）的文件夾
App.vue：項目的入口視圖，默認是綁定到了index.html中的
main.js：項目的主配置文件
package.json：當前項目的配置文件，在此文件中，典型的配置包含：項目中的依賴項，例如，當執行npm install時，將根據此文件中的配置來決定下載哪些軟件
package-lock.json：是鎖定的配置文件，通常，不建議手動維護此文件
10. 關于啟動、停止、重啟項目
在項目文件夾下，通過npm run serve即可啟動項目：
npm run serve如果項目已經啟動，當需要停止時，在啟動項目的終端窗口中按下CTRL + C即可停止項目！
提示：當按下CTRL + C后，將提示“終止批處理操作嗎(Y/N)?”，其實，此處無論選擇Y或N，效果都是一樣的！在按下CTRL + C的那一刻，項目就已經停止運行了！
此項目沒有直接“重啟”的操作，只能停止后再次運行！
11. 在Vue CLI中安裝Element UI
首先，在終端窗口中，在當前項目的文件夾下，執行安裝命令：
npm i element-ui -S經過以上操作后，會下載element ui相關的文件到本項目的node_modules文件夾中！
注意：如果你此前已經從GIT拉取了老師的項目，并執行過npm install，再次拉取添加了element ui的項目后，需要再次執行npm install，否則，老師的項目將缺少element ui相關的文件，將不可以正常啟動！
接下來，需要在項目的主配置文件（src/main.js）中添加配置：
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);總結
以上是生活随笔為你收集整理的Vue脚手架First的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在html中进行背景图片的修改为一张图片
- 下一篇： 扶我起来，Vue 3.0终于来了！