VUE的基礎配置（初學者必看）

建立專案的前期準備工作
1.安裝node-v-12.41.1-64.mis(可以再任何位置，安裝時都預設)
2.在管理員身份cmd中輸入node -v看見版本號則安裝成功
3.下載外掛npm install -g cnpm --registry=https://registry.npm.taobao.org
這是不用翻牆的外掛（虛擬環境） 輸入npm -v出現版本號則安裝成功
4.cnpm install -g webpack
5.cnpm install -g vue-cli
6.cnpm install webpack-dev-server
7.cnpm install vue-router@0.7.13 --save
8.vue --version 出現版本號則安裝成功

專案的建立
準備工作：建立一個你要做專案的資料夾
一.以管理員身份進入到命令視窗（cmd）用指令進入到你要建立專案的資料夾
a.D：進入D盤
b.cd web_vue（你要進入的資料夾）
c.cd…返回上一級
二.進入之後輸入vue init webpack-simple name(專案名字) 這是建立一個專案的資料夾
a.‘git’ �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ��� 出現這個意味著建立成功
b.Project name 專案網頁標題（不可以大寫和漢字）
c.roject description (A Vue.js project)直接回車
d. Author 直接回車 專案建立人可寫可不寫
e.License (MIT) 直接回車
f.Use sass? 選擇n
h.按照給出的步驟進行
cd XHS
cnpm install
cnpm run dev（npm需要翻牆因為cnpm不需要翻牆可以直接下載）
Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
{ parser: “babylon” } is deprecated; we now treat it as { parser: “babel” }.
出現這個瀏覽器自動彈出網頁則說明專案建立成功
如網頁沒彈出則複製http://localhost:8080/自己開啟瀏覽器貼上即可
三.如果是做移動端呢則需要在index.html中加入
在cmd中安ctrl+c終止執行
安裝外掛cnpm install vue-router --save
之後再cnpm run dev執行專案即可
四.在資料夾src裡進行專案的建立的準備工作及介紹每個檔案的作用
1.APP.vue是所有專案裡的中心（網頁所顯示的東西）
2.assets是放置專案所用到的圖片，樣式和動畫等（img，js，css等等）
3.建立一個資料夾components（官方命名可以自定義）放置所有的頁面檔案格式都為vue格式
4.建立一個子路由裡的元件與路徑相關聯router.config.js(官方命名)
作用是用來連線元件與路徑的（放置所有路由的元件，不管是主路由還是幾級子路由）
5.main.js是總的建立路由
import Vue from ‘vue’（建立完自己有的）
import App from './App.vue’匯入總的和顯示介面的連結（建立完自己有的）
//引入路由（下載安裝成功）
import VueRouter from ‘vue-router’
//匯入自己建立的配置檔案
import RouterConfig from ‘./router.config.js’
//使用路由
Vue.use(VueRouter)
//建立路由例項，同時要關聯路由配置檔案
const router =new VueRouter(RouterConfig)
new Vue({
//將建立好的路由例項掛載//將建立好的路由例項掛載
router,
el: ‘#app’,（建立完自己有的）
render: h => h(App)（建立完自己有的）
})
五.開始建立專案
1.在app.vue裡開始建立主路由
一般分為頭部 中間 底部

          <script>
          //匯入相關的元件
          import Navview from './components/Nav'
          import Fonterview from './components/Fonter'
          export default {
            name: 'app', 
            components:{
              //呼叫相關元件
              Navview,
              Fonterview
            },
            data () {
              return {
                msg: 'Welcome to Your Vue.js App'
              }
            }
          }
          </script>
    2.在資料夾components中建立元件
     （注：建立一個必須在router.config.js裡關聯路由及路徑
           最好是建立一個關聯一個）
       標準格式
            a.單純顯示介面
            b.加入其他的元件
            <template>
                <div id="home">
                    home
                    <Bannerview></Bannerview>（子元件）
                </div>
            </template>
            <script>
            import Bannerview from './Banner'
            export default {
                name:"home",
                components:{
                    Bannerview
                },
            }
            </script>
            c.使用子路由跳轉的
                <template>
                   <div id="fonter">
                     <ul class="ul1">
                        <li><router-link to="/home">首頁</router-link></li>（to後面加跳轉路徑   路徑在router.config.js裡設定）
                     </ul>
                   </div>
                </template>
    
    3.使用的所有路由元件都必須放在router.config.js裡並且建立路徑
        //匯入相關的元件
        import Home from "./components/Home.vue"（主路由元件）
        
        //匯入子路由的元件
        import DetailZ1 from './components/components/Detail_z1.vue'（子路由元件）          

        //配置路由 對應路徑和元件之間的關係
        export default{
            routes:[
                {path:'/home',component:Home},（關聯主路由的路徑）
                {
                    path:'/koubei',component:Koubei,
                    redirect:'/detail_z1',
                    children:[
                        {path:'/detail_z1',component:DetailZ1},（關聯子路由的路徑）
                        {path:'*',redirect:'/detail_z1'}
                    ],
                },
                {path:'*',redirect:'/home'}（預設設定連線的路徑）
            ]
        }


  六、相對應的外掛
     1.ul外掛 用來進行樣式的呼叫如（圖示 Icon  按鈕Button等）
       https://element.eleme.cn/#/zh-CN 
       http://mint-ui.github.io/docs/#/
       （這裡是第一個網頁的具體使用及呼叫方法，如需使用第二個，按照網頁內步驟進行）
       匯入ui的準備工作

         a.在webpack.config.js中加入以下程式碼
         module: {（原來有的，不需要新增）
           rules: [（原來有的，不需要新增）
              {
               test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
               loader: 'file-loader'
           },
         b.在 .babelrc中加入以下程式碼
         "plugins": [
            [
              "component",
              {
                 "libraryName": "element-ui",
                 "styleLibraryName": "theme-chalk"
              }
            ]
          ]

    （1） 匯入全部外掛 cnpm i element-ui -S
              匯入部分外掛 cnpm install babel-plugin-component -D
        （2） 在src下建立一個elementUi.js檔案用來存放需要呼叫的外掛
        （3） 在main.js裡建立聯絡：import './elementUi.js'
        （4） 呼叫方法：在elementUi.js下輸入
              import Vue from 'vue'
              import {Icon,Button} from 'element-ui'（大括號裡輸入你想呼叫的外掛，用逗號隔開）

              Vue.use(Icon)
              Vue.use(Button)（使用一下你呼叫的外掛）
        （5） 使用方法在你想要新增的路由（即components下的vue檔案或app.vue中）中複製網頁程式碼即可  
              
    2. axios 外掛 用來資料渲染，匯入大批量資料
        （1）匯入 cnpm install axios -D
        （2）在main.js引入外掛
            import axios from 'axios'
            axios.interceptors.request.use(function(config){
                return config
            },function(error){
                return Promise.reject(error)
            }) 

            axios.interceptors.response.use(function(response){
                return response
            },function(error){
                return Promise.reject(error)
            })
            Vue.prototype.$http = axios
       （3）在需要匯入的Vue檔案使用，使用步驟如下：
        <template>
            <div class="home" id="home">
                home
                <ul>
                    <li v-for="(item,index) in arrlist">
                        <router-link :to="'/detail/'+item.id">
                            <h3>{{item.name}}</h3>
                        </router-link>
                    </li>
                </ul>
            </div>
        </template>
        <script>
        export default {
            data(){
                return{
                    arrlist:[]
                }
            },
            mounted(){
                this.getdata()
            },

            methods:{
                getdata(){
                    var _this=this
                    //使用$http(axios)傳送請求資料
                    this.$http.get("src/data/home.data").then(function(res){
                        _this.arrlist=res.data
                    }).catch(function(error){
                        console.log("錯誤原因為："+error)
                    })
                }
            }
        }
        </script>