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