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

若是配置沒錯，項目就成功跑起來了