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，不现实的。