天天看點
傳回

抛開vue-cli，一步步搭建vue+webpack環境最終效果前期準備工作Let's Begin報錯解決

最終效果

抛開vue-cli，一步步搭建vue+webpack環境最終效果前期準備工作Let's Begin報錯解決

So easy~Just do it!

前期準備工作

一、編輯器配置高亮

敲代碼沒有高亮簡直蛋疼，簡單帶過下

sublime打開 —→ 點選Preferences下的Package Control —→ 輸入install package回車 過一會兒 —→ 再輸入vue syntax highlight回車，安裝完畢 —→ 點選sublime選擇vue component，即高亮

二、webpack知多少

入門 Webpack，看這篇就夠了

極力推薦這篇，認真跟着此教程步驟過一遍，webpack能掌握個40%了。

但是！由于依賴項更新，此教程中有很多錯誤，糾正如下：

1）使用webpack建構本地伺服器

........（此處省略部分代碼段）......
devServer: { 
        contentBase:"./public", 
        colors:true,  （誤）—→ status: {colors:true} （正）
        historyApiFallback:true,
        inline: true
    } 
}

複制

2）Loaders

........（此處省略部分代碼段）......
module: {
        loaders: [ 
            { 
                test:/\.json$/,
                loader:"json"（誤）—→ loader:"json-loader" （正）
            }    
        ]  
}

複制

**凡是“loader:”後的字段都是xx-loader而不是xx **

3）CSS預處理器

代碼會報錯，改成

{
    test: /\.css$/,
     use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {importLoaders: 1} //這裡可以簡單了解為，如果css檔案中有import 進來的檔案也進行處理
        },
        {
            loader: 'postcss-loader',
            options: {           // 如果沒有options這個選項将會報錯 No PostCSS Config found
                plugins: (loader) => [
                    require('autoprefixer')()//CSS浏覽器相容
                ]
            }
        }
    ]               
}

複制

Let's Begin

一、建立目錄

1、建立一個檔案夾（被我命名為vue-webpack-test），在此目錄下打開終端，輸入npm init，目錄下生成一個package.json

2、剩下檔案自己建立，目錄結構如下：

├── dist //
│   ├── bundle.js//打包後生成的
├── node_modules // npm包安裝後生成的
├── src // 靜态資源檔案
│   ├── components //vue元件
│   │    └── nav.vue 
│   │    └── home.vue 
│   │    └── about.vue 
│   │    └── contact.vue 
│   ├── router//vue路由
│   │    └── index.js 
│   ├── App.vue 
│   └── main.js
├── index.html // 首頁模闆（得複制一份到dist檔案夾裡并引用bundle.js）
├── webpack.config.js // webpack配置檔案
├── package.json // 包管理檔案

複制

二、安裝依賴項 

//vue相關
"vue": "^2.4.1",
 "vue-router": "^2.7.0",
 "vue-loader": "^13.0.1",
 "vue-template-compiler": "^2.4.1",

//webpack相關
"webpack": "^3.2.0",
"webpack-dev-server": "^2.5.1",

//babel相關（轉換es6）
"babel-loader": "^7.1.1",
"babel-core": "^6.25.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1"

複制

三、編寫webpack配置檔案

在寫配置檔案之前，我們先要考慮我們要利用這個打包工具完成哪些功能。

1、處理vue

2、處理es6

3、搭建測試伺服器

學完之前介紹的webpack教程，有很多代碼可以用到這裡。

//webpack.config.js
var webpack = require('webpack');
module.exports = {
    entry: __dirname + "/src/main.js",//入口檔案
    output: {
        path: __dirname + "/dist",//打包後導出檔案夾
        filename: "bundle.js"//導出的檔案名
    },
    module: { 
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015','react']
                }
            }           
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js'
        }
    },
    devServer: {
        contentBase: "./dist",
        stats:{colors: true},
        historyApiFallback: true,
        inline: true
    }
}

複制

四、項目啟動方式

修改package.json檔案裡的script字段

"scripts": {
    "start": "webpack-dev-server"
  }

複制

啟動時，打開終端，鍵入npm start即可運作

五、分析vue元件及路由

1、vue元件

1）整個頁面是個元件即App.vue

2）對于App.vue來說分為兩大塊元件：導航(nav.vue)和每個索引的具體内容

3）索引内容又細分為4個元件：home.vue、about.vue、contact.vue

源碼如下：

\\App.vue
<template>
  <div id="app">
    <navbar></navbar>
    <router-view></router-view>
  </div>
</template>

<script>
import navbar from './components/nav.vue'
export default {
  name: 'app',
  components: {navbar}
}
</script>

複制

\\nav.vue
<template>
    <ul>
        <li><router-link to="home">Home</router-link></li>
        <li><router-link to="about">About</router-link></li>
        <li><router-link to="contact">Contact me</router-link></li>
    </ul>
</template>
<script>
    export default {
        name: "navbar" //一定不要用nav
    }
</script>

複制

\\home.vue
<template>
  <div>
      <h2>{{msg}}</h2>
      <p>
        Hello everyone!Welcome to my home.
      </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
          msg: 'Home'
      }
    }
  }
</script>

複制

\\about.vue
<template>
  <div>
    <h2>{{msg}}</h2>
    <p>
      Here's my infomation
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
          msg: 'about'
      }
    }
  }
</script>

複制

\\contact.vue
<template>
  <div>
    <h2>{{msg}}</h2>
    <p>
      Do you love me?Contact me hurry up!
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
          msg: 'Contact Me'
      }
    }
  }
</script>

複制

2、路由

路由很簡單，一目了然，源代碼如下

\\index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Home from '../components/home.vue'
import About from '../components/about.vue'
import Contact from '../components/contact.vue'
let routers = [
    {
        path: '/home',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: About
    },
    {
        path: '/contact',
        name: 'contact',
        component: Contact
    },
    {
        path: '/',
        name: 'home',
        component: Home

    }
];

export default new Router({
  routes: routers
})

複制

六、html檔案

這個是個遺留問題。

手動在dist裡建一個index.html，引用最後打包的bundle.js，才能顯示出來

\\index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

複制

思考：怎麼讓html自動生成，并引用相應的js呢？

（2018.8.10更新下已解決這個問題）

利用html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: true//注入js
    })
],

複制

具體可以參考這篇：https://www.jianshu.com/p/2b872ae3362d

七、編寫入口檔案

元件代碼寫好後，要将主元件App.vue注冊到入口檔案js裡

\\main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
  el: '#app',
  router: router,
  template: '<App/>',
  components: { App }
})

複制

再次npm start啟動項目，即可完成最開始展示的效果。

報錯解決

在做這個項目過程中，一些小問題會導緻報錯，我把我所遇到的錯誤羅列如下，希望能解決你的問題。

報錯一

抛開vue-cli，一步步搭建vue+webpack環境最終效果前期準備工作Let's Begin報錯解決
//webpack.config.js漏了
resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    }

複制

報錯二

抛開vue-cli，一步步搭建vue+webpack環境最終效果前期準備工作Let's Begin報錯解決

component名稱不能與 HTML 元素或者 Vue 保留标簽重名，不區分大小寫。可以發現，隻檢查了常用的 HTML 元素，還有很多元素沒有檢查，例如 button、main。是以nav.vue的名稱不能使nav，改成navbar。

報錯三

抛開vue-cli，一步步搭建vue+webpack環境最終效果前期準備工作Let's Begin報錯解決

路由檔案index.js裡每個元件的components不能用{}

如果還有什麼疑問，請clone項目自己看看

github位址：https://github.com/Yapril/vue-nocli.git

上一篇: android studio打開新項目時注意事項
下一篇: 抛開vue-cli，一步步搭建vue+webpack環境（遷移到webpack4）