徒手擼個vue項目框架（上）

時間 2019-11-24

標籤徒手 vue 項目框架简体版

原文原文鏈接

寫這篇文章的目的，更可能是讓本身更熟悉vue-cli腳手架建立項目的依據和項目結構，其次是但願個人學習過程能夠幫到有疑惑的同窗，有什麼錯誤還但願能夠獲得指教css

爲何要分上、下，由於最近學習react.js，發現項目框架除了使用的js庫不一樣（vue.js、react.js），配置基本上是大同小異的html

這也是我佔坑（臉大）的理由vue

徒手擼個vue項目框架（上）

徒手擼個vue項目框架（下）

徒手擼個react項目框架（上）

徒手擼個react項目框架（下）

1、準備工做

1.新建vueProject文件夾

進入根目錄,初始化項目node

cd vueProject

npm init -y // -y是採用默認配置
複製代碼

此時目錄出現package.json文件react

2.建立項目結構

在根目錄下新建src文件夾，在src下暫時新建名爲index的js文件做爲入口文件webpack

根目錄下建立一個index.html,做爲入口頁面web

3.使用webpack

下載webpack時你可能會出現無限下載webpack-cli的問題，這是由於你沒有先全局安裝webpack和webpack-cli的緣由vue-router

// webpack4.X開始webpack-cli被提出來做爲一個獨立的包了
// 在下載webpack同時也要下載webpack-cli,且必須同時下載不然會報錯，由於版本不匹配
cnpm install webpack-cli webpack --save-dev
複製代碼

webpack默認只能打包js模塊，它能夠將你寫的多個js模塊打包成一個js文件，最後在入口頁面引入它vue-cli

webpack4開始默認大於配置，換句話說能夠不用再引入一個配置文件來打包項目，所以他有不少默認值npm

默認入口文件是src下的index.js，輸出爲dist目錄下的main.js（假如沒有dist目錄會自動建立）

可是它仍然是高配置的，假如須要咱們只需在項目根目錄下新建webpack.config.js來進行一切的配置

相比於webpack4以前的版本，它的配置項多出一個mode選項，可選值爲"development" 或 "production"（默認），它們的區別就是development打包輸出的文件不是壓縮版本的

4.使用vue.js

cnpm install vue@2 --save-dev
複製代碼

index.js中

// index.js
import Vue from 'vue'

new Vue({
    el: '#app',
    msg: 'hello vue'
})
複製代碼

index.html中

//  index.html
<div id ="app">{{msg}}</div>
複製代碼

使用webpack打包，將打包後的文件引入頁面，打開瀏覽器運行，此時會報以下警告

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. 
Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
複製代碼

這是由於vue有兩種構建版本的代碼：完整版和只包含運行時版，完整版是包含編譯器和運行時

解決方案多種多樣的，官方作法是給vue設置別名

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js"  // 這裏根據你使用的版本引入vue/dist 下對應的版本就行
    }
  }
};
複製代碼

添加如上配置打包後，刷新瀏覽器，能夠正常顯示msg的值了

這裏準備工做已經完成了，可是功能太捉急了，因此接下來就是webpack的施展才華的時候了

2、完善框架功能

1.使用webpack-dev-server

每次寫完新的內容要想看到效果，就必須使用webpack進行打包，咱們更但願當代碼改變時自動打包編譯

webpack-dev-server能夠幫咱們作到！

a.下載

cnpm i webpack-dev-server --save-dev
複製代碼

b.使用

假如像使用webpack命令同樣使用使用webpack-dev-server是局部安裝的，使用局部安裝的包，是徹底行不通的，由於命令行裏只能使用全局安裝的包， webpack-dev-server是局部安裝的，使用局部安裝的包，咱們須要使用在package.json中配置scripts

// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
},
複製代碼

而後再命令行使用npm run dev

npm run dev
複製代碼

注意看下面的節選的代碼

npm run dev

> vueproject@1.0.0 dev C:\myProject\vueProject
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\myProject\vueProject
i ｢wdm｣: Hash: e70fb3ae9bf074915cad
Version: webpack 4.35.0
複製代碼

從這裏咱們知道兩件事：首先，咱們的項目運行在本機8080端口，其次webpack的output輸出在根目錄下,因此記得修改index.htmlmain.js的路徑，不然你是看不到新的效果的

可是咱們在根目錄下並無看到這個文件，這是由於它被放在內存中（這樣的讀寫速度快），而不是磁盤中，另外咱們還能夠修改端口，甚至能夠在編譯完成後自動打開瀏覽器

它具體的配置能夠是在webpack的devServer項

devServer:{
    host: '127.0.0.1',
    port: 8080,
    open: true
}
複製代碼

也能夠是在cli裏，這是最暴力的方式，可是端口仍是放在devServer裏，方便之後項目的配置

// package.json
"scripts": {
    "dev": "webpack-dev-server --open --port 30000"
},
複製代碼

2.使用html-webpack-plugin

既然將main.js放在內存中能夠加快讀寫速度，那是否是把頁面放在內存中能夠進一步加快讀寫速度了？

答案是確定的！使用html-webpack-plugin就能夠作到

a.下載

cnpm i html-webpack-plugin --save-dev
複製代碼

b.使用

// webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin')
...
plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, "./index.html"),
      filename: "index.html"
    })
  ],
複製代碼

上面的代碼是根據磁盤中的index.html在內存中生成一個index.html，咱們在瀏覽器中審查頁面發現會多一個script標籤，這是插件自動將內存中的main.js加入到內存頁面中了，因此咱們這是應該刪除手動添加的script標籤

// index.html
<body>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <!--刪除或者註釋掉 <script src="./main.js"></script> -->
</body>
複製代碼

3、繼續完善框架（項目）功能

到目前爲止框架已經能夠本身監聽改變做出反應了，可是就vue自己來講仍是很簡陋的，它尚未有組件功能，也沒法編譯樣式，等等。前面說過，webpack默認是隻能處理js文件的，可是loader使得webpack能夠處理更多類型的文件。接下來使用loader繼續完善它

1. 組件功能vue-loader

組件功能是vue特有的生態vue-loader，官網中能夠看到，它配合vue-template-compiler，將組件中的html、js、css單獨提出來交給相應的loader處理

a.下載

兩個loader都須要下載

cnpm i vue-loader vue-template-compiler --save-dev
複製代碼

b.使用

在webpack.config.js中

module: {
    rules: [{ test: /\.vue$/, use: "vue-loader" }]
  },
複製代碼

若是僅是如此設置，瀏覽器啊會報錯

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
複製代碼

這是由於vue-loader和別的loader不同，他必需要有一個插件支持，這個插件在./node_modules/vue-loader/lib/plugin下，官網給出示例：

const VueLoaderPlugin = require("./node_modules/vue-loader/lib/plugin");

  module: {
    rules: [{ test: /\.vue$/, use: "vue-loader" }]
  },
  plugins: [
    ...
    new VueLoaderPlugin(),
    ...
  ],
複製代碼

2.處理樣式

處理樣式使用的是css-loader和style-loader

a.下載

cnpm i css-loader style-loader -save-dev
複製代碼

b.使用

module: {
    rules: [
        ...
      { test: /\.css$/, use: ["style-loader", "css-loader"] }
    ]
  },
複製代碼

可是項目中咱們可能使用less或sass等寫樣式，道理是同樣的，它也有本身的loader

a.下載

cnpm i less-loader -save-dev
複製代碼

b.使用

module: {
    rules: [
        ...
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }
    ]
  },
複製代碼

3.處理圖片

.test{
    background-image: url(../imgs/11.jpg);
}
複製代碼

當咱們在組件的style中使用url()會報錯，由於vue-loader沒法處理url，這時就須要使用url-loader

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
複製代碼

a.下載

url-loader內部使用了file-loader，因此兩個loader要同時下載

cnpm i url-loader file-loader --save-dev
複製代碼

b.使用

基本的使用以下

module: {
    rules: [
        ...
        { test: /\.(jpg|png|jpeg|gif|bmp)$/, use: "url-loader" } // 包括字體、視頻格式
    ]
  },
複製代碼

c.options

細心的同窗會發現，雖然圖片能夠顯示了可是審查元素時發現,圖片的名稱和路徑變化了，這是由於url-loader會將圖片編譯到內存中，而且給它設定一個哈西值做爲身份標識，當第二次用到這個文件時直接調用它，而不是在次編譯

通常它後面能夠放一個options對象，能夠控制當圖片的l字節大小大於limit屬性時觸發某些指望的設置

module: {
    rules: [
      {
        test: /\.(jpg|png|jpeg)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 8000,    // 當文件字節大小超過限定值時觸發後面的設置
            name: "[hash:8]-[name].[ext]"  // 這是在原先的名稱和後綴名前加了八位的哈希碼
          }
        }
      }
    ]
  },
複製代碼

4、結語

目前基本的功能都有了，可是仍是不夠完美，下期將會引入vue-router，而且使用UI框架，對業務進行一些封裝，但願能夠幫助到你，謝謝閱讀到這的你，有問題能夠及時告訴我，我立馬改正

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。