vue官網(wǎng)：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

概念

1. 基于Webpack所建立的開發(fā)工具
2. 利用vue cli可以使用第三方套件（vue router）
3. 可以運行Sass,Bebel等編譯工具（Beble可以編譯es6）
   4.適合開發(fā)SPA的網(wǎng)頁
   5.不便于開發(fā)SPA的網(wǎng)頁，（此需求可以用CDN模式）

webpack

可以通過vue cLi輕松搭建Webpack環(huán)境
webpack是一個打包工具，可以載入很多內(nèi)容
npm是做套件的管理

命令

 npm run dev  //將開發(fā)的環(huán)境運行起來

npm run bulid  //正式版的環(huán)境

執(zhí)行完npm run bulid會生成dist文件夾,這個文件夾必須運行在http sever中，無法通過“file：//···”這種格式打開，不能直接打開dist里邊的index.html

文件結(jié)構(gòu)

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

webpack

D:\vue_yeyang\static存放的是不會編譯的檔案
main.js是webpack運行的主要文件，webpack會監(jiān)控main.js，當(dāng)main.js一更動，就會進(jìn)行編譯
main.js

DNH%ATQXL)3NF~LN238F7W5.png

bulid文件夾下面有3個關(guān)于webpack的文件，webpack.base.conf.js是主要的。
utill.js文件里邊有多l(xiāng)oadar

這是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的進(jìn)入點

config 文件夾

config分為 dev.env.js index.js
prod.env.js
index.js針對整個運行環(huán)境。

通過webpack載入外部的套件

通過wevpack載入sass ,通過sass 載入bootstrap