筆記是整理之前開發外賣APP的整個設計框架和搭建基礎以及如何修改配置方面。老實說第一遍寫的時候腦袋裝不下，第一次開發時自己手寫了些筆記，但是當時恨不得把整個全寫下來，可是內容太多了，就寫了些關鍵的地方。寫完後自己整個又搭建了一遍，對mock數據和配置修改熟悉了些，時間久了又忘了一些，並且現在又沒有vue的項目了就想記錄一下，隔斷時間看下也不至於以後接手項目又重頭找資料搭建。

一、全局安裝vue-cli、webpack

使用的webpack模板，新建項目vue init webpack myapp，等待安裝會出現一些提示選擇回車直到安裝完畢

二、目錄

static是一個空目錄，保存第三方靜態資源的，gitkeep文件作用當static為空時也能將該目錄提交到git倉庫，正常情況該空目錄是無法提交到倉庫的。

package.json中的devDependencies表示開發編譯時的依賴

後面是一些語法的配置文件相關，比如bable是吧ES6轉成ES5的，eslintgnore是忽略部分js文件檢查，eslintrc.js中的rules可以修改規則檢查；

npm run dev實際是運行的package.json中指示的文件webpack.dev.conf.js（見下面代碼），該文件中有運行時的基礎配置文件webpack.base.conf；

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

webpack.dev.conf.js中的相關配置如下：plugns部分（熱加載）

new webpack.HotModuleReplacementPlugin(),熱加載插件
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
  filename: ‘index.html‘,後面生成的文件
  template: ‘index.html‘,為模板中的index
  inject: true      css、js文件路徑插入到新生成的html中
}),

webpack.base.conf中的相關配置如下：入口文件js，輸出路徑，簡寫設置（藍色部分引入文件自動補全後綴名；紅色部分，引入組件時常寫的路徑太長可以設置簡寫符號，下面的是默認符號）

entry: {
  app: ‘./src/main.js‘
},

output: {
  path: config.build.assetsRoot,此為config文件夾下index.js中build部分

resolve: {
  extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
  alias: {
    ‘vue$‘: ‘vue/dist/vue.esm.js‘,
    ‘@‘: resolve(‘src‘),
  }

在需求分析和項目資源準備好後導入resource文件;

SVG文件矢量文件（不會因為放大圖片改變其質量不會變化），轉換成圖標字體（通過網址https://icomoon.io/）,下載解壓後只需要font字體和style.css

在src下新建common目錄，增加font（放入圖標字體）stylus（放入style.css修改為icon.styl並修改格式去掉多余分號和括號）、js

三、模擬數據

“./”表示當前路徑

script中引入文件的路徑默認是寫相對路徑，script通過export default{}導出對象

請求靜態資源兩種方式，最後都是通過/api/seller訪問資源

第一種直接通過路由方法

const data=require(‘../data‘);
const seller=data.seller;
const express = require(‘express‘);
const app = express();
然後在devServer中添加

before(app){
  app.get(‘/api/seller‘, function(req, res) {
    res.send({
      error:0,
      data:seller
    });
  })
}
第二種Router 實例

const data=require(‘../data‘);
const seller=data.seller;
const express = require(‘express‘);
const approuter=express.Router();

before(app){
  approuter.get(‘/seller‘, function(req, res) {
    res.json({
      error:0,
      data:seller
    });
  });

app.use(‘/api‘,approuter);
}

四、

五、

vue-cli腳手架搭建項目整理筆記