人生就像一列開往墳?zāi)沟牧熊嚕吠旧蠒泻芏嗾荆茈y有人至始至終陪你走完全程，當陪你的人要下車時，即便不舍，也要心存感激，然后揮手告別。---sunnyhuang

>>1vue-cli

簡潔:通過Vue.js官方提供的命令行工具，我們可以搭建出大型的單頁運用。

1. $ npm install --global vue-cli （全局安裝vue-cli）
2. $ vue init webpack my-project（創(chuàng)建一個基于webpack的模板項目）
3. $ cd my-project （切換到相應(yīng)的文件夾安裝依賴）
4. $ npm install
5. $ npm run dev （運行dev）
   這里的my-project是一個文件夾，你也可以提前建好文件夾，$ vue init webpack .，然后在當前文件夾進行安裝

>>基本文件

安裝后的文件

安裝好vue-cli后就會有如下的主要文件夾和內(nèi)容

1. build文件夾
2. config文件夾
3. node modules 文件夾
4. src 文件夾
5. static 文件夾
6. package.json文件
7. index.html

解析文件夾

1.package.json

• package.json 首先研究基本配置文件，這個里面包含了你的項目的基本信息和重要依賴，版本等基本信息

  
  
  基本信息和依賴版本
• 通過package.json的腳本配置，知道有build文件夾下面的dev-server.js和build.js兩個不同的腳本配置，所以在啟動的時候npm run dev和npm run build是不同的二個腳本。本文章研究npm run dev

2.build文件夾

build文件中配置1. webpack.base.conf.js 2. webpack.dev.conf.js

1. webpack.base.conf.js

//第10行左右的入口配置相應(yīng)的js依賴
module.exports={
    entry:{
      main: './src/main.js', // 默認的單頁文件位置
      j0201:"./src/morepage/j0201.js",  //多頁練習(xí)的配置地址
      j0202:"./src/morepage/j0202.js"    //多頁練習(xí)的配置地址
    }
.......
}

2. webpack.dev.conf.js配置相應(yīng)的文件。配置了相應(yīng)的js，但是沒有啟動相應(yīng)的配置文件

//在最后的plugins插件位置
plugins:[
.......
 //默認的單頁配置
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks:["main"], //配置base的位置
    }),
//添加的相應(yīng)的配置
    new HtmlWebpackPlugin({
      filename: 'h0201.html',  //根路徑下的文件名
      template: 'h0201.html',  //根路徑下的文件模板來源
      inject: true,
      chunks:["j0201"], //配置base的位置
    }),
    new HtmlWebpackPlugin({
      filename: 'h0202.html',  //根路徑下的文件名
      template: 'h0202.html',  //根路徑下的文件模板來源
      inject: true,
      chunks:["j0202"], //配置base的位置
    }),
    new FriendlyErrorsPlugin()
]

3. src文件夾
   src文件放置了所有的資源文件（.js . vue等）
   舉例分析相應(yīng)的聯(lián)系
   【main.js和App.vue和index.html】

//1. 通過webpack.dev.conf.js配置，我們已經(jīng)知道index.html和main綁定
//2. 那到什么地方去找main文件呢？有一個老程序員知道的定律，一般開始的頁面的接口都是在src下面的main.js中
//3. 找到main.js
import Vue from 'vue'
import App from './App'  //3. 這里說明App在當前文件夾下的App.vue（默認隱藏vue文件的后綴）
/* eslint-disable no-new */
new Vue({
  el: '#app', // 1.綁定了id為app的元素
  render: h => h(App) //2.默認語法，尋找App
})
//4. 找到當前文件下的App.vue文件。App.vue文件分三部分
//4-1 html樣式放置位置
<template> //html樣式
<div id="app">
    ![](./assets/logo.png)
    <hello></hello>  //注意這里有一個hello，不是默認標簽，就在腳本位置尋找對應(yīng)的模板
</div>
</template>
//4-2 腳本放置位置
<script>
  import Hello from './components/Hello'  //告訴我們在當前文件夾下的components下的Hello.vue文件中
  export default {
    components: {
      Hello
    }
  }
</script>
//4-2 當前頁面樣式放置位置
<style>  //<style scoped>表示只對當前頁面有效的css
......
</style>