vue.min.js和vue-cli的區別和聯系我現在還是沒有太清楚，大概是還沒搞清楚export default和new Vue的區別，先淺淺記錄一下怎么“用vue-cli來寫網頁”。
“vue-cli是一個可以快速搭建大型單頁應用的官方命令行工具。 ”在討論這個問題前，先把項目的目錄放出來（環境的配置和項目的創建在上一篇）：
-
-
-
-
-
- build 操作文件，通過npm run * 可執行其中的文件
- config 配置文件
- src 資源文件，所有的圖片、組件都在這個文件夾內
-
-
-
-
開發階段我們關注config的index.js和src文件夾，index.js文件包含了簡單的環境配置，先來看看src和index.html，當我們在項目根目錄使用npm run dev將初始的helloworld跑起來，然后訪問127.0.0.1:8080，界面如下：
1、index.html+src
所謂的單頁應用，大概因為整個vue項目中只存在一個html文件吧，所謂頁面跳轉，做的只是頁內的界面的更新。對於整個項目，index.html是我們所見的內容，src\App.vue做的是所有頁面共有的部分，真正編輯頁面的是src\components中的vue文件，定義路由跳轉（將components嵌入App.vue）在src\router，圖片等資源文件放在src\assets，與后端交接數據通過的是vue界面中接口訪問獲取數據，如axios。
具體的如下所示
<1>index.html中我們只可以看到一個'#app'的div，作為項目網頁的主體，我們可以在index.html中引入全局的js文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-test</title> <script src="../static/lib/jquery-3.3.1.min.js"></script><!--可以在這里引入全局的js文件--> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
<2>src\mian.js可以看到為index.html中'#app'綁定App.vue的操作
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
<3>App.vue中可以編寫所有網頁公共的部分，如導航欄、頁頭頁尾等等。其中的<router-view/>則是引入的子組件的位置，具體的聯系之后再說。
<template> <div id="app"> <img src="./assets/logo.png"><!--所有網頁共有--> <router-view/><!--組件位置--> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
<4>components中放的是子組件.vue文件，如示例文件helloworld.vue，<temple></temple>元素中以單獨一個div開始定義頁面，在export default中綁定數據和頁面。
<5>那么子組件是如何和App.vue聯系起來的呢?通過router文件夾下的index.js聯系的，如下圖。
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })
參考：