開始學習vue,每天晚上學習，學習週期2周左右，過程中會蒐集整理網際網路資源，並且結合自己實踐，出新，形成一套自己風格的學習資料，這就是我的新寵Vue。會將曾經閱讀過的相關文獻在【食糧】中說明，本【食糧】也相當於友鏈，若相關作者覺得【食糧】涉及侵權，請及時聯絡我，我會第一時間刪除。
我的專案地址vue-abc
a 專案構建
原來我是使用webstorm進行專案開發，現在轉用vscode，比較輕量級，外掛也很豐富。
node環境推薦8.0.0以上版本，使用yarn替代npm
1、專案初始化
yarn init2、安裝vue相關
yarn add vue3、安裝webpack相關
yarn add webpack webpack-dev-server4、安裝babel相關
yarn add babel-core babel-loader babel-preset-env5、安裝相關loader
yarn add vue-loader vue-template-compiler6、安裝loader相關
yarn add css-loader file-loader7、學習是個循序漸進的過程，我的個人喜歡會建立a、b、c…等系列目錄，後一個目錄是對前一個目錄知識的提升，所以在進行完上述操作後，建立a資料夾，a資料夾中建立對應目錄以及相關檔案如下
└─a
├─src
│ ├─ app.vue #元件
│ └─ main.js #入口
├─index.html #模版檔案
└─webpack.config.js #webpack配置項
app.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: `Hello World!`
}
}
}
</script>
<style scoped>
#app {
background:yellow
}
</style>
main.js
import Vue from `vue`
import App from `./app.vue`
new Vue({
el: `#app`,
render: h => h(App)
})index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>vue-webpack</title>
</head>
<body>
<section id="app"></section>
<script src="./dist/build.js"></script>
</body>
</html>webpack.config.js
/* 引入操作路徑模組和webpack */
var path = require(`path`);
var webpack = require(`webpack`);
module.exports = {
/* 輸入檔案 */
entry: `./src/main.js`,
output: {
/* 輸出目錄，沒有則新建 */
path: path.resolve(__dirname, `./dist`),
/* 靜態目錄，可以直接從這裡取檔案 */
publicPath: `/dist/`,
/* 檔名 */
filename: `build.js`
},
module: {
rules: [
/* 用來解析vue字尾的檔案 */
{
test: /.vue$/,
use: `vue-loader`
},
/* 用babel來解析js檔案並把es6的語法轉換成瀏覽器認識的語法 */
{
test: /.js$/,
use: `babel-loader`,
/* 排除模組安裝目錄的檔案 */
exclude: /node_modules/
}
]
}
}通過webpack命令進行打包。
在a目錄下
../node_modules/webpack-dev-server/bin/webpack-dev-server.js在專案開發中，程式碼規範非常重要，我們使用eslint進行約束。
首先安裝eslint,由於eslint是在開發的時候使用，所以注意安裝到dev下
yarn add eslint eslint-config-vue eslint-plugin-vue --dev新建或者使用 eslint –init 新增.eslintrcp配置檔案
module.exports = {
extends: [`vue`],
plugins: [`vue`],
rules: {}
};簡單配置，重啟即可生效。