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
如果配置沒錯，專案就成功跑起來了
