vue入門（一）：項目搭建

前言

我的JS水平比較一般，而且還是跨專業半路出家，因此學習是唯一出路。vue並不是我接觸的第一個前端框架，之前學習過angular1.x，覺得不太容易，結果沒多久2版本就推出了，一看文檔：totally rewrite。WTF？？？1還沒學利索呢，2就重寫了？從此拋棄angular。
直到後來，公司需要做個管理後臺系統，經過一番比較最終選擇了vue，原因：

• angular已拉黑
• react裏的jsx語法一時不容易掌握
• vue學習成本較低，簡單易上手，性能也很優秀

二話不說立馬上手，我之前的項目都是通過vue-cli創建的，而其中的webpack配置並不特別貼合項目中的要求，由於我之前已經寫了webpack系列的博文，所以在這裏就從0-1搭建一個vue項目。

1. 開始

1.1 安裝

npm install vue vue-router -S

在項目中我們使用 .vue 文件進行開發，所以還要安裝一些工具：

npm install vue-loader vue-style-loader vue-template-compiler -D

1.2 整理目錄

打開我們之前的webpack項目，刪除 src 目錄下的所有文件，並在其下創建 asset 文件夾，用來放置資源文件；pages 文件夾，來放置我們的頁面文件；router 文件夾，路由配置；http 文件夾，ajax請求配置；app.js 入口文件，還有一個 app.vue 文件，如圖所示：

然後就可以寫代碼啦.........

2. 下面正式寫代碼

2.1 認識 .vue 文件

這個 .vue 文件是啥呢，官方文檔大概是這麼說的：

在很多 Vue 項目中，我們使用 Vue.component 來定義全局組件，緊接着用 new Vue({ el: '#container '}) 在每個頁面內指定一個容器元素。
這種方式在很多中小規模的項目中運作的很好，在這些項目裏 JavaScript 只被用來加強特定的視圖。但當在更復雜的項目中，或者你的前端完全由 JavaScript 驅動的時候，下面這些缺點將變得非常明顯：

• 全局定義 (Global definitions) 強制要求每個 component 中的命名不得重複

字符串模板 (String templates) 缺乏語法高亮

• 不支持 CSS (No CSS support) 意味着當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
• 沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預處理器，如 Babel

文件擴展名爲 .vue 的 single-file components(單文件組件) 爲以上所有問題提供瞭解決方法，並且還可以使用 webpack等構建工具。

這是一個文件名爲 Hello.vue 的簡單實例：

編寫 app.vue 文件：

<template>
  <div>
    <h1 class="red">{{text }} this is main</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      text: 'hello world'
    }
  },
  mounted () {
    console.log('app is mounted')
  }
}
</script>
<style>
  .red {
    color: red;
  }
</style>

編寫入口文件 app.js：

import Vue from 'vue'
import App from './app.vue'

new Vue({
  el: '#app',
  render: function (h) {
    return h(App)
  }
})

2.2 配置webpack

在 config 目錄下創建 vue-loader.config.js ：

// vue-loader.config.js 
module.exports = function (isDev) {
  return {
    preserveWhiteSpace: true,
    extractCss: !isDev,
    cssModules: {
      localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]',
      camelCase: true
    },
    hotReload: isDev //根據環境變量生成
  }
}

修改 webpack.config.js ：

// 引入vue-loader.config
const createVueLoaderOptions = require('./vue-loader.config')
// 引入VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 修改入口
entry: {
    app: path.join(__dirname, '../src/app.js')
  }

// 修改loaders配置
{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: createVueLoaderOptions(isDev)
      },
      {
        test: /\.css$/,
        use: [
          isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          'less-loader'
        ]
      }

// 添加VueLoaderPlugin
new VueLoaderPlugin(),
// 修改HtmlWebpackPlugin
new HtmlWebpackPlugin({
      template: path.join(__dirname, '../app.html'),
      inject: true,
      minify: {
        removeComments: true
      }
    })

至此，所有配置完畢，執行

npm run dev

如果配置沒錯，項目就成功跑起來了