Vue腳手架
Vue腳手架可以快速生成Vue專案基礎的架構。
安裝3.x版本的Vue腳手架
/*
npm install -g @vue/cli@3.3
*/
基於3.3版本的腳手架命令建立Vue專案
/*
1. 命令：vue create my-project
選擇Manually select features(選擇特性以建立專案)
2. 勾選特性可以用空格進行勾選。
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◯ Vuex
◯ CSS Pre-processors
❯◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
3. ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
是否選用歷史模式的路由：n
4. ? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier
ESLint選擇：ESLint + Standard config
5. ? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection
)
❯◉ Lint on save
◯ Lint and fix on commit
何時進行ESLint語法校驗：Lint on save
6. ? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection
)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
In dedicated config files
❯ In package.json
babel，postcss等配置檔案如何放置：In dedicated config files(單獨使用檔案進行配置)
是否儲存為模板：n
使用哪個工具安裝包：npm
cd 專案名
npm run dev
*/
基於UI介面建立Vue專案
/*
命令：vue ui
在自動開啟的建立專案網頁中配置專案資訊。
*/
基於2.x的舊模板,建立Vue專案
/*
npm install -g @vue/cli-init
vue init webpack my-project
*/
分析Vue腳手架生成的專案結構
/*
node_modules:依賴包目錄
public：靜態資源目錄
src：原始碼目錄
src/assets:資源目錄
src/components：元件目錄
src/views:檢視元件目錄
src/App.vue:根元件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置檔案
.eslintrc.js:
*/
Vue腳手架的自定義配置
/*
A.通過 package.json 進行配置 [不推薦使用]
因為package.json主要用來管理包的配置資訊, 為了方便維護,推薦將vue腳手架相關的配置,單獨定義到vue.config.js配置檔案中.
"vue":{
"devServer":{
"port":"9990",
"open":true
}
}
B.通過單獨的配置檔案進行配置，建立vue.config.js
module.exports = {
devServer:{
port:8888,
open:true
}
}
*/
Element-UI簡介
Element-UI安裝
Element-UI:一套基於2.0的桌面端元件庫
官網地址：http://element-cn.eleme.io/#/zh-CN
元件庫
/*
npm install element-ui -S
*/
Element-UI匯入使用
/*
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI)
*/
// 複製一段element-ui程式碼到App.vue上
<el-row>
<el-button>預設按鈕</el-button>
<el-button type="primary">主要按鈕</el-button>
<el-button type="success">成功按鈕</el-button>
<el-button type="info">資訊按鈕</el-button>
<el-button type="warning">警告按鈕</el-button>
<el-button type="danger">危險按鈕</el-button>
</el-row>
