不借助vue-cli,自行構建一個vue項目


前言:

  對於剛剛接觸vue的同學來說,直接用官方的構建工具vue-cli來生成一個項目結構會存在一些疑惑,比如:   .vue組件 為什么可以寫成三段式(tempalte、script、style)? 整個項目是怎樣組織運行起來的,main.js - App.vue - 各個組件 之間是怎么相互引用的?

  為了讓更多同學理解,我們不借助官方構建工具,自行構建一個類似於官方的項目結構,去體會它的運作機制。

  在自行構建的項目中,我們的組件並不使用.vue文件方式,因為這種文件是經過了vue-loader做了相應的處理,意思可以理解為將組件<template></template>中的模板編譯到了組件對象中。而我們既然選擇原生的方式,那么我們就應該將模板寫在組件選項'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:'<app></app>'),然后將這個Vue實例掛載到index.html中id為app的元素中。

 

打包:

  在打包之前我們需要先修改vue npm包的package.json文件,將默認導出的‘只包含運行時’改為‘完整版’,即將如下兩項的'runtime'去掉(運行時不包含編譯器 | 編譯器作用:用來將模板字符串編譯成為 JavaScript 渲染函數的代碼>,因此組件對象不支持 template 選項):

  

  在項目根路徑執行打包(全局安裝過webpack)

  webpack ./src/main.js ./dist/main.bundle.js

 

index.html:

  將打包后的文件引入到頁面:

  

  接下來去瀏覽器訪問它吧~

 

 

效果:

  

 

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM