使用 VueJS 全家桶做一個簡單的 SPA 應用
最近 Vue 越來越火了, 知乎上到微博上, 越來越多的人在用它. 之前有學過一點 NG1 , 相比 NG1, VUE 的 API 十分簡單.再通過使用 Vue 全家桶, 可以進行更高效的開發. 以下是本人使用 Vue 全家桶(VueJS + VueRouter + Vuex + Webpack) 擼出來 SPA 的一些過程. 使用的是 豆瓣的公共 API .
安裝 Webpack
既然要用全家桶, 那么就需要先使用 Webpack, Webpack 是一個非常方便工具, 能根據配置文件自動地進行 JS 文件的打包.
首先我們需要安裝 Node.js. 然后使用 NodeJS 里的 npm (NodeJSPackageManager) 進行包的安裝和管理.
安裝完畢之后, 打開 cmd , 在項目文件夾內運行 $ npm init , 之后會有一大串要你填的信息, 直接回車到底就行了.
完成之后, 這時項目文件夾中出現了一個 package.json 的文件.
做好了前期的準備工作, 我們現在開始正式安裝 webpack , 在 命令行中輸入 $ npm i webpack -g , -g 表示 webpack 將會是全局安裝, 如果發現安裝速度慢或甚至無法安裝可以使用 cnpm 或者每次安裝時都切換淘寶鏡像, 在 -g 后添加 --registry=http://registry.npm.taobao.org , 下同.
等待安裝結束, 我們可以開始寫 webpack 的配置文件了. 在項目文件夾的根目錄創建一個名叫 webpack.config.js 的文件.
然后我們再創建一些文件, 使文件結構像這樣:
-
app
-
index.js
-
-
webpack.config.js
-
package.json
-
index.html
現在, 我們先開始配置 webpack 的入口文件和出口.
代碼如下:
module.exports = {
entry: './app',
output: {
path: './build/,
filename: 'bundle.js'
}
};
index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<script src="./build/bundle.js"></script>
</body>
</html>
接下來,
index.js:
var h2 = document.createElement('h2');
h2.innerHTMl = 'HELLO VUEJS';
document.body.appendChild(h2);
直接在 cmd 中運行 webpack ,就能看到頁面顯示了一個h2標簽,內容是 HELLO VUEJS.
安裝 Webpack-dev-server
可以打包之后我們可以讓 webpack 運行一個自己的服務器, 并且能在我們文件更新之后, 讓其自動刷新
繼續使用 cmd , 輸入指令 npm i webpack-dev-server --save-dev . --save-dev 會講安裝后的包放在package.json 的devDependencies,一個放在dependencies里面, 產品模式用dependencies，開發模式用devDep.
安裝完成之后, 繼續往 webpack.config.js 中添加配置.
devServe: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
}
再向 package.json 中 "script" 添加配置
"script": {
"start": "webpack-dev-server --hot --inline"
}
.json 格式的文件里無論鍵名還是值都必須使用雙引號.
寫好之后在 cmd 中輸入 npm run start 跑出一串字之后, 打開 localhost:8080 , 就能看到結果, 然后我們隨意修改一下文本的內容保存一下, 會發現瀏覽器內的文字自動地刷新了. MAGIC
如何寫 CSS
現在能改動結構了, 但是有了結構就改想想 css 的問題了.
webpack 是把一個文件看作一個模塊, 我們需要使用專門的 webpack loader 來處理各式文件.
處理 css 文件時, 我們需要 2個loader, 一個 style-loader 和 css-loader , 先來安裝這兩個 loader ,
輸入 $ npm i css-loader style-loader --save-dev .
安裝完畢后, 我們再來配置 webpack.config.js ,
module: {
loaders: [
{
test: /.css$/, //匹配到所有的css文件
loader: 'style!css', //有多種寫法, 這是字符串式的寫法, style-loader 等loader 可以省去loader 直接寫 loader名,
loaders: ['style', 'css'], //數組寫法, 注意要使用loaders!, loader 的執行順序是從右到左, 也就是先用css-loader 再使用 style-loader
}
]
}
當然, 我們也可以使用 less sass stylus 等其他的 css 預處理器, 只需要在安裝相應的loader, 這里我以 less-loader 為例, 因為 windows 的 SASS 會教你做人. 上一家公司 因為電腦沒有安裝 visual studio 而搞了幾天....
安裝 less-loader , 輸入 $ npm i less-loader --save-dev , 等待安裝結束后, 檢查一下安裝的依賴中是否有之前沒安裝過的, 要繼續安裝.(這個問題也許是之前我沒有安裝其他模塊的依賴. less-loader 依賴 less ).
這里我們把剛才的 module.loaders 改一下
module: {
loaders: [
{
test: /.less$/, //匹配所有以 .less 結尾的所有文件
loader: 'style!css!less', //用 less-loader 來處理文件, 要先于 css-loader 處理之前處理 less
loaders: ['style', 'css', 'less'],
}
]
}
這樣,我們也可以使用 less 了.
在 index.js 中以 AMD 方式引入 require('main.less'); . 這樣就能愉快書寫 less 了.
如何使用 EcmaScript 2015
ES6 已經是2016年之后的趨勢了, VueJS 全家桶里的很多例子都是由 ES6 寫成的. 是時候使用 EcmaScript 2015 了!
首先我們需要安裝 babel-loader 以及 babel :
在命令行內輸入
$ npm install --save-dev babel-preset-env
安裝babel, 以及
$ npm i --save-dev babel-loader
安裝babel-loader
安裝之后更改 webpack.config.js 里的module.loaders
...,
{
test: /.js$/,
loader: 'babel-loader'
}
babel 要求一個預制值, 可以在
...,
{
test: /.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
不過這樣寫, 在 .vue 文件中的 JS 將無法被處理.
這時 我們應該直接寫到
module: ...,
babel: {
presets: ['es2015']
}
[1, 2, 3].forEach( (that) => console.log(that) );
看看轉換的結果吧
安裝 VueJS, 使用 vue-loader, 單文件組件
搞了這么久, Vue 的 V 字都沒開始寫.
現在開始安裝 Vuejs
$ npm i vue
并且在 index.js 里引入 Vue
import Vue from 'vue';
安裝 vue-loader, 這樣我們就能夠使用 .vue 直接創建單文件組件了.
并且需要在 webpack.config.js 里加入
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
寫起來吧!
引入單文件組件:
import MainView from './components/Mainview.vue';
如何直接用組件渲染到 el: #app 上?
使用
new Vue({
render (h) {
h(MainView); //將 MainView 渲染
}
}).$mount('#app'); //將渲染到 #app, 將會替換 #app
使用 Vue-router
$ npm install vue-router`
如果本身 應用頁面很多的話, 可以將路由文件單獨獨立出來成一個文件.
首先在 router.js 引入
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
我們繼續來定義路由:
const router = new VueRouter({
routes: [
{
path: '/',
component: HeaderVue //當只有一個Vue 沒有其他命名路由時使用
components: { //當有其他命名路由時使用, 注意s!
nameA: HeaderVue,
nameB: HelloVue,
default: ContentVue
}
}
]
});
最后我們將這個參數用 module.export = router; 傳遞到 index.js .
這里還有一個問題: 如果單獨在一個頁面里定義路由, 里面的 components 改如何寫呢, 相對地址會不好寫.
這里 node 提供了個函數 require(['./components/Content.vue'], resolve) 就能直接寫了.
component: require(['./components/Content.vue'], resolve);
使用 Vuex
$ npm i vuex
Vuex 是 Vue 的狀態管理工具.
import Vuex from 'vuex';
const store = new Vuex.Store({
state: ..., //狀態
mutations: ..., //同步的改變狀態, 請調用 mutation 來改變狀態,而不是通過修改state
actions: ... //異步改變狀態
});
其他具體事項就看 API 好了. 學習難度比 NG1 低好多..[淚奔惹!]
來自：https://segmentfault.com/a/1190000007852093