vue 項目結構說明

eslink：規範es6的代碼風格檢測工具。
npm install  node-sass  -g   ：全局安裝，即便安裝以後能夠全局使用dode-sass，不用進到工具目錄。
.babel:把es6轉換成es5,由於不少瀏覽器不支持es6.
.editorconfig:編輯風格

html是入口文件。

package.json:
"scripts": { //配置一些腳本
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },
npm run dev：執行的就是node build/dev-server.js
npm run build：執行的就是node build/build.js

dev指的是config/index.js裏面的dev
  dev: {
    env: require('./dev.env'),
    port: 8081,                               //端口
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',    
    assetsPublicPath: '/',                //靜態資源的路徑
    proxyTable: {
      '/api': {
        changeOrigin: true,
        target: 'http://127.0.0.1:3000',
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },        

"devDependencies": {} : 是編譯過程的一些依賴 html是入口文件。

js和css是會動態插入到這個頁面的，入口的js是main.js,第一個組件是App.vue，App.vue由template、script、style組成。 

熱部署是webpack的。

編寫一個cartcontrol.vue組件要template、script、style，而且export default公佈出去，在使用的地方 import cartcontrol from 'components/cartcontrol/cartcontrol';就把剛纔那個組件導入進來，
 components: { 
    cartcontrol, //而且還要註冊 
}, 
完了以後就能夠<cartcontrol :food="food"></cartcontrol>使用導入進來的組件了。 
因此index.html能夠使用<App></App>,由於main.js導入App.vue了而且註冊了App:components: {App}，App.vue裏面導出了export default 。 

生產環境的代碼不會這麼大。 
webpack是前端構建工具，把前端頁面打包最後出來.js.css.png文件。 

webpack是如何作編譯的： npm run dev執行的是node build/dev-server.js命令，運行的是build目錄下的dev-server.js文件，
 dev-server.js文件：
 var path = require('path') ：提供文件路徑操做的方法 
var express = require('express') ：express是一個nodejs框架，用它啓動一個webserver 
var webpack = require('webpack') : webpack是核心編譯工具 
var config = require('../config') ：是一個配置文件，config目錄 
var proxyMiddleware = require('http-proxy-middleware') ： 協議代理的中間件 
var webpackConfig = require('./webpack.dev.conf') ： webpack的配置 

webpack.dev.conf.js: 
var merge = require('webpack-merge') : 用來合併配置文件用的 
var utils = require('./utils') ：一些工具方法 
var baseWebpackConfig = require('./webpack.base.conf') ： webpack配置文件，是被開發時dev和運行時prod的配置共享的。 
var HtmlWebpackPlugin = require('html-webpack-plugin') ： webpack提供操做html文件的插件 

webpack.base.conf.js 
var projectRoot = path.resolve(__dirname, '../') : 項目的根目錄 
module.exports = { entry: { app: './src/main.js' //webpack編譯的入口js文件是main.js }, 
output: { path: config.build.assetsRoot, //輸出的文件路徑，

對應config/index.js裏面 
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, //請求的靜態資源的絕對路徑，
對應config/index.js裏面 
filename: '[name].js' //輸出的文件名稱，
name就是entry的key，輸出就是app.js，因此頁面中能夠引用app.js， 
}, 
resolve: { extensions: ['', '.js', '.vue'], //模塊導入require、import的時候能夠自動補全文件後綴， 
fallback: [path.join(__dirname, '../node_modules')], //找不到模塊的時候就去node_modules找這個模塊 
alias: { // 'vue$': 'vue/dist/vue', 
'src': path.resolve(__dirname, '../src'), 
'common': path.resolve(__dirname, '../src/common'), 
'components': path.resolve(__dirname, '../src/components') } }, 
resolveLoader: { fallback: [path.join(__dirname, '../node_modules')] //找不到模塊的時候就去node_modules找這個模塊 }, module: { loaders: [ 
{ test: /\.vue$/, loader: 'vue' //vue文件用vue loader處理 
}, { 
test: /\.js$/, loader: 'babel', include: projectRoot, exclude: /node_modules/ 
}, { 
test: /\.json$/, loader: 'json' 
}, { 
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url', query: { limit: 10000, //小於10Kb時候 
name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url', query: { 
limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 
} 
} 
] 
}, 

config/index.js： 
build: { assetsRoot: path.resolve(__dirname, '../dist'), //會建立dest目錄做爲輸出的目錄， 
assetsPublicPath: '/', //靜態資源在根目錄的路徑， 

 

npm run build : 執行的是config/index.js裏面的
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },

會生成dist目錄，放入apache服務器就能夠了。
Npm run dev是開發時候用到的，會再內存使用webpack，不現實的。