我的新寵Vue a系列 專案初構

曹偉發表於2017-09-19
Vue

開始學習vue,每天晚上學習，學習週期2周左右，過程中會蒐集整理網際網路資源，並且結合自己實踐，出新，形成一套自己風格的學習資料，這就是我的新寵Vue。會將曾經閱讀過的相關文獻在【食糧】中說明，本【食糧】也相當於友鏈，若相關作者覺得【食糧】涉及侵權，請及時聯絡我，我會第一時間刪除。
我的專案地址vue-abc

a 專案構建

原來我是使用webstorm進行專案開發，現在轉用vscode，比較輕量級，外掛也很豐富。
node環境推薦8.0.0以上版本，使用yarn替代npm
1、專案初始化

yarn init

2、安裝vue相關

yarn add vue

3、安裝webpack相關

yarn add webpack webpack-dev-server

4、安裝babel相關

yarn add babel-core babel-loader babel-preset-env

5、安裝相關loader

yarn add vue-loader vue-template-compiler

6、安裝loader相關

yarn add css-loader file-loader

7、學習是個循序漸進的過程，我的個人喜歡會建立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: {}
};

簡單配置，重啟即可生效。

【食糧】

相關文章