[Vue.js] 使用vue-cli快速建立專案

建立時間: 2016-10-21 21:25:24
更新時間: 2017-06-25 23:51:25

 

前言

使用vue-cli能夠快速的建立vue專案

另外本篇使用的範例的版本為vue2.0

所以有些部分可能會與vue1.x有些不同

 

安裝vue-cli

必要工具: Node.js (>=4.x, 5.x)

 npm install -g vue-cli

 

開始建立專案

 vue init <template-name> <project-name>

template-name這邊

可選擇官方提供的五種

 

另外也能夠建立自己的專案

放在local或是remote repo上

有興趣可以參考官方文件

 

安裝套件

 npm install

 

運行專案

執行npm run dev後

開啟網址localhost:8080就能看到初始的專案了

 npm run dev

 

到這邊為止

已經能啟動初始的專案

不過接下來還要裝一些一般專案常用套件

 

移除eslint

由於eslint會嚴格的檢查語法

一旦出現多餘的空白或是tab就會讓整個vue專案停擺

所以我選擇將它關閉

注意這並非必要選項

 

將preLoaders中eslint的部分全部移除

 preLoaders: [
   {
     test: /\.vue$/,
     loader: 'eslint',
     include: projectRoot,
     exclude: /node_modules/
   },
   {
     test: /\.js$/,
     loader: 'eslint',
     include: projectRoot,
     exclude: /node_modules/
   }
 ]

 

另外下方的eslint也要移除

 eslint: {
     formatter: require('eslint-friendly-formatter')
 }

 

jQuery

首先先安裝jquery並將相依性寫入package.json

 npm install jquery --save-dev

 

修改webpack.base.conf.js

首先在最上方載入

 var webpack = require('webpack')

 

在vue: {}的下方

將jquery設定為全域

 plugins: [
 	new webpack.ProvidePlugin({
 		$: "jquery/dist/jquery",
 		jQuery: "jquery/dist/jquery",
 		"window.jQuery": "jquery",
 		"window.$": "jquery"
 	})
 ]

 

Bootstrap

安裝bootstrap並將相依性寫入package.json

 npm install bootstrap@4.0.0-alpha.5 --save-dev

 

通常App.vue為根元件

所以我們會在App.vue中載入bootstrap

 

載入css

 <style src="bootstrap/dist/css/bootstrap.min.css"></style>

 

因為在vue的生命週期中

mounted為$el安裝好所有元件後的時間點

所以我們要在mounted中載入bootstrap.js

 import Hello from './components/Hello'
 
 export default {
   name: 'app',
   mounted: function () {
     require('bootstrap/dist/js/bootstrap');
   },
   components: {
     Hello
   }
 }

 

另外因為Bootstrap4有使用到tether這個套計

所以還要再另外裝tether這個套件

 npm install tether --save-dev

 

然後在webpack.base.conf.js中將tether跟jquery一樣設定為全域

 plugins: [
 	new webpack.ProvidePlugin({
 		$: "jquery/dist/jquery",
 		jQuery: "jquery/dist/jquery",
 		"window.jQuery": "jquery",
 		"window.$": "jquery",
 		Tether: 'tether',
 		"window.Tether": 'tether'
 	})
 ]

 

Font-Awesome

安裝fontawesome並將相依性寫入package.json

 npm instal FortAwesome/Font-Awesome --save-dev

 

跟bootstrap一樣

在App.vue中載入css

注意font-awesome沒有dist資料夾

 <style src="font-awesome/css/font-awesome.min.css"></style>

 

SASS

安裝node-sass及sass-loader並將相依性寫入package.json

 npm install node-sass sass-loader --save-dev

 

修改webpack.base.conf.js

讓vue中的sass能夠自動編譯

 loaders: {
 	{
 		test: /\.scss$/,
 		loader: 'sass',
 		exclude: /node_modules/
 	},
 	{
 		test: /\.sass$/,
 		loader: 'sass?indentedSyntax',
 		exclude: /node_modules/
 	}
 }

 

安裝載入後

在style標籤中加入lang="sass?indentedSyntax"

就能在vue元件中使用sass

 <style lang="sass?indentedSyntax" type="text/sass"></style>