首先安裝腳手架及建立基於webpack專案

• 首先下載vue相關
  
  • cnpm install vue
• 安裝 vue-cli腳手架
  
  • 全域性安裝 vue-cli
  • $ cnpm install –global vue-cli
  • 建立一個基於 webpack 模板的新專案
  • $ vue init webpack my-project
  • 如果有提示，預設回車即可
• 進入專案，安裝並執行：
  
  • cd my-project
  • cnpm install
  • cnpm run dev

整合scss語法

• 首先什麼事scss及為什麼用scss
  scss是css預編譯處理語言，是專門為css設計的，它的優勢在於開發效率高。對於一些樣式複雜的站點，比手寫 CSS 快得多，設計思想是面向物件話，結合es6語法，效果很好。關於語法學習這裡就不說了。
• 下載關於scss的相關包
  
  • npm install sass-loader node-sass –save-dev
• 專案整合
  專案中找到 build資料夾下面的webpack.base.conf.js檔案新增如下程式碼塊

{
          test: /\.scss$/,
          use: [{
              loader: "style-loader" // creates style nodes from JS strings
          }, {
              loader: "css-loader" // translates CSS into CommonJS
          
 
}, {
              loader: "sass-loader" // compiles Sass to CSS
          }]
 }

在樣式中新增 lang=”scss”既可以使用scss語法

整合px2rem-loader來達到響應式佈局

• 下載 px2rem-loader
  
  • npm i install px2rem-loader –save-dev
• vue中配置 在build下的 utils.js中，找到generateLoaders 方法

//先新增物件
var px2remLoader = {
    loader: 'px2rem-loader'
 
,
    options: {
      remUnit: 41.4//設計稿寬度，也就是設計手機的螢幕寬度
    }
};
  // 找到這個物件，在載入數組裡面新增px2remLoader 來確定載入到
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader ] : [cssLoader,px2remLoader ]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

這樣就會自動幫我們把對應的px轉換成rem
- 下載安裝lib-flexible
- npm i lib-flexible –save-dev
- 在專案入口檔案main.js中引入lib-flexible
- import ‘lib-flexible/flexible.js’
上面所述，移動端響應式佈局專案就搭建完畢了。

設定代理來實現前後端分離的混合開發

找到–condig–index.js檔案

proxyTable: {
        "/api":{
            target:"http://localhost:3000/",//需要跳轉的伺服器地址
            changeOrigin:true,
            pathRewrite:{
                '^/api':'/' //瀏覽器會根據讀取的帶有api開頭的進行重寫
            }
        }
    }

這樣就可以訪問後端人員提供的介面進行前後端互動了

擴充套件關於axios的使用

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
1、安裝axios
npm install axios –save-dev
2、配置
首先，找到vue腳手架入口 main.js處進行元件引入
import axios from ‘axios’
然後以原型鏈的形勢掛載到Vue物件中並進行使用如下：
Vue.prototype.$axios = axios

基於Express服務端的nodejs專案搭建

1.下載express框架的生成命令（只需要執行一次）
npm install express-generator -g
2.生成開發專案資料夾(一個專案執行一次)
express node-project -e
-e:利用ejs模組引擎
3.進入node-project資料夾，並且執行npm install
下載node-project資料夾下package.json檔案中dependencies中的所有依賴的模組
4.啟動專案,並在瀏覽器中訪問專案 http://localhost:3000
npm start
5.修改package.json
“scripts”: {
“start”: “supervisor ./bin/www” // 每次修改及時生效
}
6.修改模板引擎的字尾名
app.js中第15行改為下列兩行程式碼，將ejs檔案替換為html
app.engine(‘html’, require(‘ejs’).__express);
app.set(‘view engine’, ‘html’);
修改views目錄下的檔案字尾名為html
這樣基於Express框架的nodejs專案基本搭建完成。