個人新寵Vue a系列項目初構

時間 2019-12-26

標籤個人 vue 系列項目简体版

原文原文鏈接

開始學習vue,天天晚上學習，學習週期2周左右，過程當中會蒐集整理互聯網資源，而且結合本身實踐，出新，造成一套本身風格的學習資料，這就是個人新寵Vue。會將曾經閱讀過的相關文獻在【食糧】中說明，本【食糧】也至關於友鏈，若相關做者以爲【食糧】涉及侵權，請及時聯繫我，我會第一時間刪除。
個人項目地址vue-abcjavascript

a 項目構建

原來我是使用webstorm進行項目開發，如今轉用vscode，比較輕量級，插件也很豐富。
node環境推薦8.0.0以上版本，使用yarn替代npm
一、項目初始化css

yarn init

二、安裝vue相關html

yarn add vue

三、安裝webpack相關vue

yarn add webpack webpack-dev-server

四、安裝babel相關java

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

五、安裝相關loadernode

yarn add vue-loader vue-template-compiler

六、安裝loader相關webpack

yarn add css-loader file-loader

七、學習是個按部就班的過程，個人我的喜歡會建立a、b、c...等系列目錄，後一個目錄是對前一個目錄知識的提高，因此在進行完上述操做後，建立a文件夾，a文件夾中建立對應目錄以及相關文件以下git

└─a
  ├─src        
  │  ├─ app.vue                   #組件
  │  └─ main.js                   #入口
  ├─index.html                    #模版文件
  └─webpack.config.js             #webpack配置項

app.vuees6

<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.jsgithub

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: {}
};

簡單配置，重啓便可生效。

【食糧】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

個人新寵Vue a系列 項目初構

a 項目構建

【食糧】

個人新寵Vue a系列項目初構