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