Vue2.0構建——踩過的坑

Miss_Ye發表於2017-11-23
Vue

vue.js 初步學習

傳說中的vue 全家桶 ：vue + vue-router + vuex

1、構建新專案（基於webpack 3.8.1，前提安裝node環境）

$ npm install --global vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

注意：進行專案建立和初始化之後是沒有一些依賴包的，目錄中的node_moduless資料夾是沒有的，這個時候我們就要進入專案的目錄下，使用”npm install”來初始化依賴包，初始化需要的包都在package.json裡面設定好了。

2、vue-loader

vue-loader其實就是一個webpack的loader。用來把vue元件轉換成可部署的js,html,css模組。如果要想在vue專案中使用scss,要告訴vue-loader怎麼樣解析我的scss檔案。

在webpack中，所有前處理器都要匹配相應的loader,vue-loader允許其他的webpack loader處理元件中的程式碼，然後它根據lang屬性自動判斷出要使用的loaders。 因為在新版本的vue-cli已經幫我們把sass-loader配置好了，放在了util.js裡面。 所以無需在webpack.base.config.js對scss進行配置，只要安裝處理sass/scss的loader，就能在vue中使用scss了。

（1）、Vue對scss的依賴

①、首先安裝依賴

$ npm install node-sass --save-dev
$ npm install sass-loader --save-dev

②、在需要用到scss的地方標註：

<style lang="scss"> </style>

3、配置檔案

（1）、解釋一下webpack.base.config.js，webpack.base.conf.js是一個基礎的的環境配置檔案，裡面包含各個環境（包括開發環境，生產環境，測試環境）都需要的配置，即公用部分。比如說入口檔案和輸出檔案這類，然後開發環境的webpack.dev.conf.js中開頭位置有這麼一句：
const devWebpackConfig = merge(baseWebpackConfig, // 將 webpack.dev.conf.js 的配置和 webpack.base.conf.js 的配置進行合併，這樣重複的配置程式碼就不用寫兩次了。

（2）、使用兩個獨立的Webpack配置檔案，一個用於開發（webpack.dev.conf.js），另一個用於生產(webpack.prod.conf.js),共用的配置部分放在webpack.base.conf.js中。

（3）、在build/build.js檔案中定義變數：process.env.NODE_ENV = `production`(在使用webpack和vue-cli構建的專案中，Vue會根據 process.env.NODE_ENV 決定是否啟用生產環境模式，預設為開發模式)

4、專案結構
(1)、整體專案目錄

--build   
--config  
--dist   //npm run build 之後再生成的目錄
--src  
  --components   // 存放元件
  --page    //頁面元件，由vue-router引入
  --router  //路由
  --store   // 資料流管理
  main.js   //入口檔案
  app.vue   //主元件 
--static   //靜態檔案目錄
.babelrc    
.gitignore  //git忽略上傳檔案
index.html  //靜態檔案入口
package.json  //配置檔案

(2)、main.js檔案

import Vue from `vue`;
import App from `./App`;
import router from `./router`;

Vue.config.productionTip = false;
//開啟debug模式
Vue.config.debug = true

new Vue({
  el: `#app`,
  router, // 建立和掛載根例項。記得要通過 router 配置引數注入路由
  template: `<App/>`,
  components: { App },
});

(3)、app.vue檔案

app.vue是我們的主元件，所有頁面都是在App.vue下進行切換的,app.vue在所有頁面都有，通常將公用的元件放在裡面

<template>
  <div id="app">
    <main-header></main-header>
    <mainSidebar/>
    <!-- Content Wrapper. Contains page content -->
    <router-view></router-view>
    <!-- /.content-wrapper -->
    <MainFooter/>
  </div>
</template>

5、npm run build 後生成的dist檔案訪問本地static路徑下的data.json資料有問題，需要修改productionSourceMap屬性為false

 module.exports = {
  build:{
     assetsSubDirectory: `static`,  //修改這裡成你專案放置靜態檔案的目錄
     assetsPublicPath: `./`,     //修改這裡成你專案放置靜態檔案的目錄
     productionSourceMap: false     //修改為false
  }
 }

6、非同步DOM更新

如果需要拿到更新後dom中的資料，則需要通過 Vue.nextTick(callback)，在DOM更新後，執行某個操作（屬於DOM操作）
例項呼叫vm.$nextTick(function () {})

methods: {
  fn() {
    this.msg = `change`
    this.$nextTick(function () {
      console.log(`$nextTick中列印：`, this.$el.children[0].innerText);
    })
  }
}

相關文章