vue腳手架基礎

vuecli 腳手架

利用webpack 搭建了 vue 自動化開發環境
官網：https://cli.vuejs.org/zh/guide/installation.html

//安裝
cnpm i @vue/cli -g
//測試
vue --version

分析腳手架 生成專案目錄結構

<link rel="shortcut icon" href="xxx.ico"/>

vue-demo
  node_modules // 專案依賴存放目錄
  public   // 存放靜態資源的目錄
    favicon.ico // 網頁標題圖示
    index.html // 專案唯一的html檔案
  src   // 原始碼目錄
    assets  
      //存放靜態資源目錄（專案中的靜態資源如css/js/字型圖示都最好在這裡）
      // 放在這個目錄中的靜態資源 webpack 會去優化處理，public靜態資源webpack不會做任何處理，run build之後，public中的靜態資源會原樣輸出，assets中的靜態資源路徑寫相對路徑、public中的寫絕對路徑
    components // 存放公共元件的目錄
    router // vue路由的配置目錄 
      index.js 
    store  // vuex目錄
    views // 存放路由元件的目錄
    App.vue  // 根元件  放路由出口 router-view
    main.js  // 入口函式 webpack 會自動將入口函式 引入到index.html上
    babel.config.js  // babel的配置檔案
    package.json //專案配置檔案

專案啟動過程

單檔案元件

webpack vue-loader 解析 .vue結尾檔案，將.vue結尾檔案自動解析成vue的元件

.vue
<template>
	<div>
    	
    </div>
</template>
<script>
	export default {
        data () {
            return {
                
            }
        },
        methods: {},
        xxx
        xxx
        x
    }
</script>
<style lang="sass|scss|less|stylus" scoped>
	/*
    當前元件的樣式
    scoped 定義 當前style標籤中的樣式 只針對當前元件有效 一般需要加
    */
</style>

es6模組化

基於webpack 萬物可模組化（不止是js還包括css/字型圖示/圖片xxxx）,可以在任意的js檔案中引入

1，一個檔案如果沒有提供介面，那麼整個檔案就是一個介面，可以直接引入，在引入的檔案中執行該檔案
2，提供介面
  (1)，一個檔案提供多個介面
  a.js
      export const a = 10;
      export const b = ()=>{xxx}
      export const c = {}
     或者
      const a = 10;
      const b = ()=>{}
      const c = {}

      export { // 注意：a,b,c不是簡寫 語法規定
        a,
        b,
        c
      }
    引入介面
    b.js
    注意：匯出多個介面 對應解析 解析成 匯出一個物件 {a,b,c}
    import { a, b, c } from './a'
    import * as obj from './a'  // obj {a:10,b:xx,c:xx}
  (2) 一個檔案 預設只 匯出一個 介面
    export default 值

    引入
    import 變數 from '路徑'

使用過程

在router
  index.js中定義路由規則
  在 views目錄中 定義路由元件
  在components目錄中定義 公共的元件
  在元件的
    style標籤中定義當前元件的樣式
    style標籤要加 scoped屬性 當前樣式只針對當前元件有效不會影響其後代元件以及其他元件

    想要穿透scoped的限制
    /deep/ 選擇器 {
      
    }

  任意一個資源 如 css 如字型圖示 想要全域性使用（在任意一個元件中都能作用到）
  那麼直接在main.js中引入即可

自定義配置

在根目錄下建立 vue.config.js

module.exports = {
  devServer: {
    port: 9527,
    open: true //自動開啟
  },
  linOnSave: false // 關閉eslint提醒
}