08 . Vue腳手架安裝,使用,自定義配置和Element-UI匯入使用

阿新 • • 發佈：2020-11-21

Vue腳手架

Vue腳手架可以快速生成Vue專案基礎的架構。

安裝3.x版本的Vue腳手架

/*
			npm install -g @vue/[email protected]
*/

基於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>