資訊專欄INFORMATION COLUMN
摘要：在自行構建的項目中，我們的組件并不使用文件方式，因為這種文件是經過了做了相應的處理，意思可以理解為將組件中的模板編譯到了組件對象中。并且提供給外界一個參數接口。
前言
對于剛剛接觸vue的同學來說，直接用官方的構建工具vue-cli來生成一個項目結構會存在一些疑惑，比如: .vue組件 為什么可以寫成三段式（tempalte、script、style）? 整個項目是怎樣組織運行起來的，main.js - App.vue - 各個組件 之間是怎么相互引用的？
為了讓更多同學理解，我們不借助官方構建工具，自行構建一個類似于官方的項目結構，去體會它的運作機制。
在自行構建的項目中，我們的組件并不使用.vue文件方式，因為這種文件是經過了vue-loader做了相應的處理，意思可以理解為將組件中的模板編譯到了組件對象中。而我們既然選擇原生的方式，那么我們就應該將模板寫在組件選項"template"中（雖然這種方式沒有語法高亮，但要記得我們這樣做的目的），而我們的組件后綴是.js。
開始1.進入自己的項目根目錄，初始化npm
npm init
2.安裝vue包到項目
npm install --save vue
3.創建index.html/src目錄/dist目錄
文件功能touch index.html mkdir src mkdir dist
到目前，我們的項目結構：
接下來我們在src路徑下創建，js入口文件main.js，項目根組件App.js，和組件目錄components，并且我們象征性的創建兩個組件cp1.js、cp2.js ：
main.js 是所有js的入口，（那么我們在index.html文件中只需要引入這個文件就夠了？ -- 并不是），該文件將會聲明與其他組件的依賴關系（而其他組件又會聲明和別的組件的關系），我們在寫完項目的時候需要使用webpack打包整個項目的js代碼，而這個main.js就是打包尋找依賴的入口。
我們得知通過Vuejs構建的項目，是組件化的，項目可以說是由一個個組件構成的，在一個組件中可以使用其他的組件作為自己的子組件，那么必然會存在一個根組件，它就是App.js。
組件components文件夾下存放的是項目中的除根組件外的其他組件，我們在寫這些組件的時候應該遵循的一個原則就是：與外界隔絕，不做任何與外界耦合的假設。那么我們就來我們就開始編寫組件cp1.js吧：
請注意它和.vue組件寫法的區別，我們的組件模板是寫在template選項中的。并且提供給外界一個props參數接口msg。
接下來我們需要在根組件中引用這個組件，根組件的寫法遵循同樣的原則：
要使用cp1組件，首先要將其import導入，因為cp1.js中導出的寫法是export default，所以我們在這可以給cp1組件對象隨意命名（import后緊隨的"cp1"就是我們的命名），這是ES6的語法規則。
記住：每個組件對象我們都需要使用export default進行導出，因為這樣外界才可以調用它，并且將 給此組件的命名權 遞交給使用者。
我們看到，在根組件中我們有components選項，用來注冊將使用的組件（局部注冊）。此選項對象中的key將作為模板中標簽，value為其他組件對象。
在模板中我們使用了cp1標簽，并且給其props屬性msg賦值為"Message from parent ~"。
入口組件都寫好了，那如何將其掛載到html頁面中呢，這個時候我們需要一個橋梁，就是main.js：
這次我們終于用到Vue了！（記得先導入），并且導入App根組件，將其注冊為Vue實例的組件，并且在模板中使用它（template:"
在打包之前我們需要先修改vue npm包的package.json文件，將默認導出的‘只包含運行時’改為‘完整版’，即將如下兩項的"runtime"去掉（運行時不包含編譯器 | 編譯器作用：用來將模板字符串編譯成為 JavaScript 渲染函數的代碼>，因此組件對象不支持 template 選項）：
在項目根路徑執行打包（全局安裝過webpack）
index.htmlwebpack ./src/main.js ./dist/main.bundle.js
將打包后的文件引入到頁面：
接下來去瀏覽器訪問它吧～
效果：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89435.html
摘要：前言是現階段很流行的前端框架，很多人通過官方文檔的學習，對的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎么更好的管理自己的項目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細地介紹本人在處理工程文件構建的過程對 前言 vue是現階段很流行的前端框架，很多人通過vue官方文檔的學習，對vue的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎...
摘要：前言是現階段很流行的前端框架，很多人通過官方文檔的學習，對的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎么更好的管理自己的項目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細地介紹本人在處理工程文件構建的過程對 前言 vue是現階段很流行的前端框架，很多人通過vue官方文檔的學習，對vue的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎...
摘要：前言是現階段很流行的前端框架，很多人通過官方文檔的學習，對的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎么更好的管理自己的項目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細地介紹本人在處理工程文件構建的過程對 前言 vue是現階段很流行的前端框架，很多人通過vue官方文檔的學習，對vue的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎...
摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。服務端技術棧登錄授權用認證機制，來實現登錄登出。服務器配置和緩存策略，根據不同的來代理。申請證書全站升級到，配置的協議。一、前言提綱 基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。 二、歷史版本 基于Vue-CLI2.0:點我查看 這個分支版本是一兩年前...
閱讀 3967·2021-11-24 09:38
閱讀 1234·2021-10-19 11:42
閱讀 1834·2021-10-14 09:42
閱讀 2159·2019-08-30 15:44
閱讀 549·2019-08-30 14:04
閱讀 2897·2019-08-30 13:13
閱讀 1956·2019-08-30 12:51
閱讀 963·2019-08-30 11:22
