11-vue_day08

day08內容

17. npm項目

  test
    node_modules  用於存放第三方依賴
    public
    src
    package.json
      name:           項目基礎信息
      version:
      scripts:{xxx}   項目的腳本-webpack 
        npm run xxx
      dependencies:{} 產品依賴，在打包的時候會和我們寫的src一起打包在一個文件中
      devDependencies:{}  開發依賴，僅在開發的時候會用到

  拷貝項目的時候用不用拷貝node_modules??
    node_modules中文件很多，壓縮很慢，很難發送，並且一般沒必要發送。所有的依賴信息都是維護在package.json，我們讓npm根據package.json重新下載一份即可。

  
 1) 對於gitee中老師發佈的倉庫的處理方案
  1. 克隆下來
    > git clone https://gitee.com/pluslicy/web2001_cms_vuecli.git
  2. 通過vscode打開
    打開終端(有些windows10電腦無法在vscode終端操作npm命令，這時候百度查詢解決!)
  3. 安裝依賴
    > cd web2001_cms_vuecli
    > cnpm install
  4. 啓動
    > npm run serve
2) 項目開發結束後，將項目打包並且部署到雲服務器中
  1. 修改配置文件
    在項目根目錄中添加vue.config.js文件
    module.exports = { publicPath: './' }
  2. 執行打包命令【在當前目錄】
    > npm run build
  3. 本地測試
    將dist/index.html在本地瀏覽器中直接打開，如果測試沒問題
  4. 上傳到阿里雲服務器中
  5. 將dist修改文件名放到apache部署目錄下即可
  6. 測試
    http://ip/文件名

18. 路由基礎

  企業級開發中，vue技術棧
    vue（核心） + vueRouter（頁面跳轉）+ vuex（狀態維護）+ 組件庫（移動端【vant,mintui】、web端【elementui,antdesign】） + axios/jquery（ajax框架）

    動態組件（根據組件名來加載不同的組件）
    Category -> 組件1
    Article  -> 組件2
    
    路由（根據路由地址加載不同的組件）
    頁面 - 組件
    /category -> 組件1
    /article  -> 組件2
  1) 安裝
    1. script 
      不適合企業級開發，但是適用於學習研究
      <script src="vue.min.js">
      <script src="vue-router.min.js">

    2. npm
      > npm install vueRouter --save
      配置
    
    3. vue/cli插件安裝
      > vue add router
  2) 簡單應用
    1. 聲明組件
      let Article = {}
      let Category = {}
    2. 實例化路由對象
      let router = new VueRouter({
        routes:[{
          path:'/article',
          component:Article
        },{
          path:'/category',
          component:Category
        }]
      })
    3. 在vue實例對象中配置路由
      new Vue({
        el:'#app',
        router
      })
    4. 設置路由頁面容器
      <router-view />
    5. 測試
      http://ip:port/index.html#/article
      http://ip:port/index.html#/category
    6. 路由跳轉按鈕
      <router-link to='/article'>文章</router-link>
  3) 動態路由匹配
    let router = new VueRouter({
      routes:[{
        path:'/article/:id',
        component:Article
      },{
        path:'/category',
        component:Category
      }]
    })

    路由  
      /artcile/1
      /artcile/2      -> Article
      /artcile/3
      都可以匹配 /article/:id，並且將1/2/3賦值給id
      在Article實例中如何獲取id? this.$route.params.id
  4) 響應路由參數的變化
    由於多個路由對應同一個組件，爲了高效，組件不會在每次切換路由的時候都進行銷燬重建，而是複用。
    複用組件時，想對路由參數的變化作出響應的話，你可以使用如下方式
      1. 簡單地 watch (監測變化) $route 對象：
      2. 使用路由守衛
        beforeRouteUpdate
  5) 匹配所有頁面 應用在404
    let router = new VueRouter({
      routes:[{
        path:'/category',
        component:Category
      },
      ...
      {
        path:'*',
        component:Default
      }]
    })
  6) 編程式導航
    this.$router.push()     向路由棧中壓入新的地址
    this.$router.replace()  在路由棧頂替換一個新地址
    this.$router.go(-1)     操作路由棧
  7) 命名路由
    routes:[{
        name:'category'
        path:'/category',
        component:Category
      },
    編程式導航參數傳遞

    this.$router.push('category')
    this.$router.push('/category')
    // 參數是以查詢字符串的形式暴露在地址欄中
    this.$router.push({
      path:'/category',
      query:{id}
    })
    // 在地址欄中不顯示傳遞參數，更加安全，路由複用的時候比較麻煩
    this.$router.push({
      name:'category',
      params:{id}
    })
  8) 命名視圖
    有時候想同時 (同級) 展示多個視圖，而不是嵌套展示，例如創建一個佈局，有 sidebar (側導航) 和 main (主內容) 兩個視圖，這個時候命名視圖就派上用場了。

    <router-view class="view two" name="a"></router-view>
    <router-view class="view three" name="b"></router-view>

    routes: [
      {
        path: '/',
        components: {
          a: Bar,
          b: Baz
        }
      }
    ]
  9) 重定向跳轉
    routes:[{
      path:'/',
      redirect:{
        name:'category'
      }
    },{
      name:'category',
      path:'/category',
      component:Category
    }]

    當訪問路由/ 會自動跳轉到/category中
  10) 別名
    routes: [
      { path: '/a', component: A, alias: '/b' }
    ]
    使用路由/a 或者 /b 都可以訪問到組件A
  11) 路由模式
    1. hash模式 默認模式
      http://ip:port/index.html#/category
      http://ip:port/index.html#/article
    2. history  [腳手架中應用!]
      http://ip:port/index.html/category
      http://ip:port/index.html/article

19. 路由進階

  1) 嵌套路由
    routes:[{
      path:'/order',
      component:Order,
      children:[{
        path:'all',
        component:Order_All
      },{
        path:'completed',
        component:Order_Completed
      },{
        path:'un_completed',
        component:Order_Un_Completed
      }]
    },{
      path:'/goods',
      component:Goods
    }]
  2) 導航守衛
    1. 組件內守衛 【聲明在組件實例對象中】
      beforeRouteEnter
      beforeRouteUpdate
      beforeRouteLeave
      當進入該組件的時候，如果進入之前路由發生改變，該守衛就會被激發
      /article/1  - Article
      /article/2  - Article   由於路由發生變換，所有會激發該守衛
    2. 全局守衛【綁定在router對象上】
      router.beforeEach()
      router.afterEach()
    3. 組件獨享守衛【定義在route對象上】
      routes:[{
        path:'',
        component:,
        beforeEnter:()=>{

        }
      }]
  3) vue/cli中融合vuerouter機制
    使用vue/cli創建項目，集成vue以及vueRouter
    1. 使用vue/cli直接創建基於vue + vueRouter項目
      1) 使用vue/cli初始化基於vue + vueRouter的項目
        > vue create app04
          手動安裝特性
          babel
          Router
        創建完成後，項目中依賴了vue vueRotuer

      2) 安裝jquery【ajax】，在public/index.html通過script引入jquery即可

      3) 安裝elementui【通過插件形式進行安裝】
        > vue add element
        全部導入
        可以修改element樣式文件
      
      到此爲止，項目架構就完成，vue + vueRouter + elementui + jquery
      

    2. 已經使用vue/cli創建好了基於vue的項目，後來集成vueRouter