vue官网：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

概念

1. 基于Webpack所建立的开发工具
2. 利用vue cli可以使用第三方套件（vue router）
3. 可以运行Sass,Bebel等编译工具（Beble可以编译es6）
   4.适合开发SPA的网页
   5.不便于开发SPA的网页，（此需求可以用CDN模式）

webpack

可以通过vue cLi轻松搭建Webpack环境
webpack是一个打包工具，可以载入很多内容
npm是做套件的管理

命令

 npm run dev  //将开发的环境运行起来

npm run bulid  //正式版的环境

执行完npm run bulid会生成dist文件夹,这个文件夹必须运行在http sever中，无法通过“file：//···”这种格式打开，不能直接打开dist里边的index.html

文件结构

来自https://www.bilibili.com/video/av35541119/?p=11

webpack

D:\vue_yeyang\static存放的是不会编译的档案
main.js是webpack运行的主要文件，webpack会监控main.js，当main.js一更动，就会进行编译
main.js

DNH%ATQXL)3NF~LN238F7W5.png

bulid文件夹下面有3个关于webpack的文件，webpack.base.conf.js是主要的。
utill.js文件里边有多loadar

这是bulid文件夹下的webpack.base.conf.js文件

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {  //定义了入口
    app: './src/main.js'
  },
  output: {  //输出
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  } ,
resolve: {//resolve这边可以省略很多的副文件名（文件后缀），例如.js等等
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

app.js是整个vue.cli的进入点

config 文件夹

config分为 dev.env.js index.js
prod.env.js
index.js针对整个运行环境。

通过webpack载入外部的套件

通过wevpack载入sass ,通过sass 载入bootstrap