<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          采用vue-cli搭建一個Vue.js項目工程

          時間:?2017-10-19閱讀:?2367標簽:?cli

          Vue是目前來比較火的一個前端框架,與react和angular成三國鼎立。Vue是什么?是一套構建用戶界面的漸進式框架(官網解釋)

          Vue兩大核心思想:組件化和數據驅動,組件化就是將一個整體合理拆分為一個一個小塊(組件),組件可重復使用,數據驅動是前端的未來發展方向,釋放了對DOM的操作,讓DOM隨著數據的變化自然而然的變化(尤神原話)

          vue-cli 的腳手架項目模板有browserify 和 webpack , 現在自己在用的是webpack , 官網給出了兩個模板: webpack-simple 和 webpack 兩種。兩種的區別在于webpack-simple 沒有包括Eslint 檢查功能等等功能,普通項目基本用webpack-simple 就足夠了  

          安裝和啟動

          步驟1:安裝node.js

          步驟2:npm安裝淘寶鏡像 npm install cnpm -g --registry=https://registry.npm.taobao.org

          步驟3:cnpm install --g vue-cli

          步驟4:創建項目vue init webpack my-project

          步驟5:進入項目文件cd my-project,安裝依賴 cnpm install

          步驟6:啟動項目 npm run dev

          步驟7:打包文件 npm run build 


          路由(vue-router)

          vue 生態系統中的路由(vue-router)是我們在做vue.js單頁面應用體系必用到的機制

          import VueRouter from 'vue-router'//路由
          import routerConfig from './lib/routers'//路由配置
          
          Vue.use(VueRouter)
          const router = new VueRouter({routes: routerConfig})
          
          new Vue({
            router,
            el: '#main',
            components: { App },
          })

          按需引入:需要實現根據不同頁面加載不同js 

          父子嵌套:尤其是組件存在父子關系的時候,我需要在路由里面也配置出相對應的關系結構

          export default [
           {path: '/a',component:function(resolve){require(['../pages/a'],resolve);}, 
            	children: [
            		{path: '/a/b',component:function(resolve){require(['../pages/ab'],resolve);},}
            	]
              },
          ]


          數據源(vuex)

          vuex是vue生態系統中管理數據源的庫!它提供了狀態樹(state),這里定義了全局的數據結構,數據分為2種:動態數據和靜態數據,在vuex只放動態數據,把靜態數據放入到vue.js的data里面。


          UI組件庫

          在vue生態體系里面有很多專業的UI組件庫,比如Element(后端)、Mint-ui(移動前端)等一些,雖然很多組件的交互大體相似,


          AjAX數據獲取(axios)

          基本使用axios來做獲取數據操作,放棄使用vue-resource,在POST請求的時候需要配合“qs”插件來做,遇到跨域場景需要服務器同時支持,axios源碼里面是基于XMLHttpRequest對象來實現。


          樣式支持

          對應css預編譯Less、Sass都支持,主要需要安裝對應的依賴

          cnpm install less less-loader --save
          cnpm install node-sass sass-loader  --save


          國際化(i18n)

          Vue-i18n是以插件的形式配合Vue進行工作的。通過全局的mixin的方式將插件提供的方法掛載到Vue的實例上。

          import VueI18n from 'vue-i18n'
          
          Vue.use(VueI18n) 
              
          const i18n = new VueI18n({
                  locale: CONFIG.lang,    // 語言標識
                  messages: {
                      'zh-CN': require('./common/lang/zh'),   // 中文語言包
                      'en-US': require('./common/lang/en')    // 英文語言包
                  }
          })
          const app = new Vue({
               i18n,
               ...App
          }).$mout('#root')


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/4

          vue-cli的安裝及版本查看更新

          vue-cli安裝npm install vue-cli -g,vue-cli的3.0+以后使用的不是vue-cli了,如果用以上的安裝命令安裝的并不是最新版的3.0+的,而如果安裝3.0的話就需要使用新的npm install @vue/cli -g

          @vue/cli 項目編譯重復命中緩存問題解析

          最近遇到一個更新了 package,但是本地編譯打包后沒有更新代碼的情況,先來復現下這個 case 的流程:翻了那些 issue 后,基本知道了是由于 webpack 在編譯代碼過程中走到 cache-loader 然后命中了緩存,這個緩存是之前編譯的老代碼

          解決vue cli2和cli3打包后不能運行問題 Failed to load resource: net::ERR_FILE_NOT_FOUND

          打包后的文件要在服務器中運行 解決方法:放在服務器中打開,依次在終端執行下面命令;vue cli3 在項目根目錄內vue.congfig.js文件(如沒有,自行創建)加上如下代碼

          扔掉 cli,webpack工程輕量化配置實戰

          本文從實戰出發,提供了一個相對普適的輕量化webpack工程配置方案。受篇幅所限,沒有對一些配置項做過多解釋,如果需要了解某個配置細節,可以查詢相關文檔或文章。有興趣的同學也可以閱讀webpack源碼作深入了解

          解決Angular CLI找不到模塊angular-devkit/build-angular的問題

          Angular CLI 是 Angular 客戶端命令行工具,提供非常多的命令來簡化 Angular 的開發。今天執行“ng serve”命令時,竟然報找不到模塊@angular-devkit/build-angular的錯誤。

          Angular CLI 使用教程指南參考

          要安裝Angular CLI你需要先安裝node和npm,然后運行以下命令來安裝最新的Angular CLI:注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持。

          vue-cli3 DllPlugin 提取公用庫

          vue 開發過程中,保存一次就會編譯一次,如果能夠減少編譯的時間,哪怕是一丁點,也能節省不少時間。開發過程中個人編寫的源文件才會頻繁變動,而一些庫文件我們一般是不會去改動的。如果能把這些庫文件提取出來,就能減少打包體積,加快編譯速度。本文主要講述在 vue-cli3 中利用 DllPlugin 來進行預編譯。

          在vue-lic腳手架中安裝mockjs,實現前后端分離開發

          在項目開發前期,前端開發中,頁面布局基本開發完畢,但是后臺還接口還沒有開發完,等待后臺開發完接口,在進行接口聯調,浪費了等待時間,也壓縮的測試的時間

          改造vue-cli,使用mockjs搭建mock server

          最近準備開發一款web應用,考慮到可能會有前后端并行開發的場景,所以決定使用mockjs做mock server。瀏覽官網文檔時發現沒有跑在webpack上的例子,索性自己找方法解決。當前端工程師需要獨立于后端并行開發時,后端接口還沒有完成,那么前端怎么獲取數據?

          Vue-cli 3.0配置反向代理

          vue-cli 3.0版本,配置代理Proxy,在項目根目錄下新建vue.config.js,它是一個可選的配置文件,新建該文件,存放在項目根目錄(將自動加載)中。配置代理如下:

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网