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

前言

對於剛剛接觸vue的同窗來講,直接用官方的構建工具vue-cli來生成一個項目結構會存在一些疑惑,好比: .vue組件 爲何能夠寫成三段式(tempaltescriptstyle)? 整個項目是怎樣組織運行起來的,main.js - App.vue - 各個組件 之間是怎麼相互引用的?html

爲了讓更多同窗理解,咱們不借助官方構建工具,自行構建一個相似於官方的項目結構,去體會它的運做機制。vue

在自行構建的項目中,咱們的組件並不使用.vue文件方式,由於這種文件是通過了vue-loader作了相應的處理,意思能夠理解爲將組件<template></template>中的模板編譯到了組件對象中。而咱們既然選擇原生的方式,那麼咱們就應該將模板寫在組件選項'template'中(雖然這種方式沒有語法高亮,但要記得咱們這樣作的目的),而咱們的組件後綴是.jswebpack

開始

1.進入本身的項目根目錄,初始化npmweb

npm initvue-cli

2.安裝vue包到項目npm

npm install --save vuejson

3.建立index.html/src目錄/dist目錄瀏覽器

touch index.html  mkdir src  mkdir distapp

文件功能

到目前,咱們的項目結構:函數

1036165-20171101162056326-1637164839.png

接下來咱們在src路徑下建立,js入口文件main.js,項目根組件App.js,和組件目錄components,而且咱們象徵性的建立兩個組件cp1.jscp2.js

1036165-20171101162540982-1363667174.png

main.js 是全部js的入口,(那麼咱們在index.html文件中只須要引入這個文件就夠了? -- 並非),該文件將會聲明與其餘組件的依賴關係(而其餘組件又會聲明和別的組件的關係),咱們在寫完項目的時候須要使用webpack打包整個項目的js代碼,而這個main.js就是打包尋找依賴的入口。

咱們得知經過Vuejs構建的項目,是組件化的,項目能夠說是由一個個組件構成的,在一個組件中可使用其餘的組件做爲本身的子組件,那麼必然會存在一個根組件,它就是App.js

組件

components文件夾下存放的是項目中的除根組件外的其餘組件,咱們在寫這些組件的時候應該遵循的一個原則就是:與外界隔絕,不作任何與外界耦合的假設。那麼咱們就來咱們就開始編寫組件cp1.js吧:

1036165-20171101164105123-790502783.png

請注意它和.vue組件寫法的區別,咱們的組件模板是寫在template選項中的。而且提供給外界一個props參數接口msg

接下來咱們須要在根組件中引用這個組件,根組件的寫法遵循一樣的原則:

1036165-20171101164733529-1476699533.png

要使用cp1組件,首先要將其import導入,由於cp1.js中導出的寫法是export default,因此咱們在這能夠給cp1組件對象隨意命名(import後緊隨的'cp1'就是咱們的命名),這是ES6的語法規則。

記住:每一個組件對象咱們都須要使用export default進行導出,由於這樣外界才能夠調用它,而且將 給此組件的命名權 遞交給使用者。

咱們看到,在根組件中咱們有components選項,用來註冊將使用的組件(局部註冊)。此選項對象中的key將做爲模板中標籤,value爲其餘組件對象。

在模板中咱們使用了cp1標籤,而且給其props屬性msg賦值爲'Message from parent ~'

入口

組件都寫好了,那如何將其掛載到html頁面中呢,這個時候咱們須要一個橋樑,就是main.js

1036165-20171101170250560-2092362344.png

此次咱們終於用到Vue了!(記得先導入),而且導入App根組件,將其註冊爲Vue實例的組件,而且在模板中使用它(template:'<app></app>'),而後將這個Vue實例掛載到index.htmlidapp的元素中。

打包

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

1036165-20171101172207138-1270820955.png

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

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

index.html

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

1036165-20171101173326013-1703716730.png

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

  效果:

  1036165-20171101173440779-220905955.png

相關文章
相關標籤/搜索