前言

前幾天，因?yàn)榻柚丛创a的熱乎勁，搞了一個(gè)玩具Js庫(kù)Strview.js。為什么會(huì)搞這么一個(gè)玩具庫(kù)呢?其實(shí)也不全是因?yàn)橥砩祥e的沒事，主要還是想通過實(shí)操來(lái)鍛煉自己的開發(fā)能力。之前，我也寫過一篇文章，那篇文章只是大體介紹了一下，沒有深究。之前大家可能覺得它跟Vue.js差不多，是的，正是借鑒Vue.js的思想，但是有些地方還是不一樣(個(gè)人覺得)。所以，今天，這篇文章介紹基于Strview.js搭建的項(xiàng)目腳手架工具StrviewApp。如果你覺得對(duì)自己有用，可以繼續(xù)看下去。如果覺得這篇肯定是篇垃圾文章，你也可以避而遠(yuǎn)之。好了，我們現(xiàn)在就進(jìn)去正題。準(zhǔn)備好了嗎?一起跟我來(lái)吧!

創(chuàng)新互聯(lián)專注于淮北網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供淮北營(yíng)銷型網(wǎng)站建設(shè)，淮北網(wǎng)站制作、淮北網(wǎng)頁(yè)設(shè)計(jì)、淮北網(wǎng)站官網(wǎng)定制、小程序設(shè)計(jì)服務(wù)，打造淮北網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供淮北網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

快速上手StrviewAPP

你可以通過StrviewCLI快速初始化StrviewAPP項(xiàng)目，你可以這樣：

全局安裝。

 
 
 
 

  
  
  
  
npm i strview-cli -g
 
 
 
 

安裝完成之后，你可以查看版本。

 
 
 
 

  
  
  
  
strview-cli -v
 
 
 
 

最后，就是初始化項(xiàng)目了， 是自定義項(xiàng)目名稱。

 
 
 
 

  
  
  
  
strview-cli init 
 
 
 
 

or

 
 
 
 

  
  
  
  
strview-cli i 
 
 
 
 

這樣，一個(gè)StrviewAPP項(xiàng)目就這么搭建完成了。

StrviewAPP項(xiàng)目結(jié)構(gòu)

下圖就是StrviewAPP項(xiàng)目組織結(jié)構(gòu)。

下面，我將介紹每個(gè)文件及文件夾的作用。

• config

這個(gè)是webpack配置文件夾，關(guān)于webpack的配置都在這配置。文件夾中里面有如下三個(gè)文件，分別如下：

 
 
 
 

  
  
  
  
- webpack.base.js // 基礎(chǔ)配置
  
  
  
  

  
  
  
  
- webpack.dev.js // 開發(fā)環(huán)境配置
  
  
  
  

  
  
  
  
- webpack.pro.js // 生產(chǎn)環(huán)境配置
 
 
 
 

• public

資源文件夾。

 
 
 
 

  
  
  
  
- favicon.ico  // 網(wǎng)站標(biāo)識(shí)
  
  
  
  
- index.html  // 模板文件
 
 
 
 

• .gitignore

哪些文件不需要添加到版本管理中。

• .prettierrc

Prettier 規(guī)則配置文件。

• package.json

定義了這個(gè)項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息(比如名稱、版本、許可證等元數(shù)據(jù))。

• src

這個(gè)文件夾是StrviewAPP項(xiàng)目的主要文件夾，下面我們來(lái)看下這個(gè)文件夾里面到底有什么。

 
 
 
 

  
  
  
  
- assets //存放靜態(tài)文件
  
  
  
  
- components // 組件文件夾
  
  
  
  
- data // 公用狀態(tài)文件夾
  
  
  
  
- methods // 方法文件夾
  
  
  
  
- style // 樣式文件夾
  
  
  
  
- template // 模板文件夾
  
  
  
  
- App.js // 頁(yè)面入口
  
  
  
  
- main.js // 項(xiàng)目入口文件
 
 
 
 

Src文件夾詳析

上面我們分析完了項(xiàng)目結(jié)構(gòu)，那么下面我們將進(jìn)一步分析Src文件夾中的文件構(gòu)成以及它們之間如何配合的。

1. main.js

首先，我們看下main.js文件，這是項(xiàng)目入口文件，我們來(lái)看下文件中的內(nèi)容。

 
 
 
 

  
  
  
  
import { createView } from 'strview';
  
  
  
  
import data from './data';
  
  
  
  
import App from './App';
  
  
  
  
import methods from './methods';
  
  
  
  

  
  
  
  
createView({
  
  
  
  
  el: "#app",
  
  
  
  
  template: App,
  
  
  
  
  data
  
  
  
  
});
  
  
  
  

  
  
  
  
// The event is handled after the createview API
  
  
  
  
methods();
 
 
 
 

我們先引入了strview.js，導(dǎo)入createView這個(gè)API用于創(chuàng)建視圖。那么，我們我們跳到下面看下這個(gè)API是怎么使用的。首先我們傳入一個(gè)對(duì)象字面量，第一個(gè)屬性是el屬性，它是掛載的DOM節(jié)點(diǎn)。第二個(gè)屬性是template屬性，它是用于顯示視圖的模板。第三個(gè)屬性是data屬性，傳入值為顯示的數(shù)據(jù)。最后，我們看到有這么一行注釋The event is handled after the createview API，意思是事件方法必須要在createViewAPI之后調(diào)用，即這里的methods();。

2. App.js

上面說到，App.js用與顯示視圖的模板，那么下面我們來(lái)看下。

 
 
 
 

  
  
  
  
import myParagraph from './components/myParagraph';
  
  
  
  
import card from './components/card';
  
  
  
  
import helloTemplate from './template/helloTemplate';
  
  
  
  
import './style/index.css';
  
  
  
  

  
  
  
  
const App = `
  
  
  
  
${helloTemplate}
  
  
  
  

  
  
  
  
    點(diǎn)擊
  
  
  
  
    {a}，，（a和b都改變）

  
  
  
  
    
  
  
  
  
      
{age}
  
  
  
  
      
{name}
  
  
  
  
      
{msg}
  
  
  
  
    
  
  
  
  
    {a}，（a會(huì)改變）

  
  
  
  
    ，（b會(huì)改變）

  
  
  
  
    
  
  
  
  
    
{obj.a.b}
  
  
  
  
    
{arr}
  
  
  
  
    
{ob.name}