我們一般創(chuàng)建vue項目都是通過vue-cli腳手架去創(chuàng)建，這次我嘗試了通過文檔完成所有項目配置包括webpack、ant-design-vue、vue-router、vuex等
項目源碼：https://github.com/wzp123321/myVueJSProByMySelf.git
1.新建項目

2.使用vscode打開項目

3.初始化

vue init 
如果想省事就直接npm init -y

4.安裝基本的 npm 包

npm install vue vue-loader webpack webpack-cli --save-dev 

5.創(chuàng)建文件夾以及文件

目錄.png

6.配置webpack.config.js
在這之前先安裝一些依賴
模板解析依賴：

npm install vue-template-compiler --save-dev

樣式依賴:
css-loader:https://webpack.docschina.org/loaders/css-loader/

npm i style-loader css-loader --save-dev

文件加載依賴

npm install file-loader --save-dev

解析es6語法依賴:https://github.com/babel/babel-loader

npm install -D babel-loader @babel/core @babel/preset-env webpack

這是一個webpack插件，可簡化HTML文件的創(chuàng)建以服務您的webpack捆綁軟件

npm i html-webpack-plugin --save-dev

現(xiàn)在就可以配置webpack.config.js，如果有什么不清楚的可以參考官網(wǎng)https://webpack.docschina.org/configuration/

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry: path.join(__dirname, './src/index.js'),
    // 輸出
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index.js'
    },
    module: {
        rules: [{
                // 使用vue-loader解析.vue文件
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/, // 不處理這兩個文件夾里的內(nèi)容
                loader: 'babel-loader'
            },
            {
                test: /\.ts$/,
                use: 'ts-loader'
            },
             {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                        loader: 'file-loader',
                        options: {},
                    },
                ] ,
            },
        ]
    },
    resolve: {
        // 解析模塊請求的選項
        // （不適用于對 loader 解析）
        modules: [
            'node_modules',
            path.resolve(__dirname, 'app')
        ],
        // 用于查找模塊的目錄
        extensions: ['.js', '.json', '.jsx', '.css'],
        // 使用的擴展名
        alias: {
            // 模塊別名列表
            'module': 'new-module',
            // 起別名："module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"
            'only-module$': 'new-module',
            // 起別名 "only-module" -> "new-module"，但不匹配 "only-module/path/file" -> "new-module/path/file"
            'module': path.resolve(__dirname, 'app/third/module.js'),
            // 起別名 "module" -> "./app/third/module.js" 和 "module/file" 會導致錯誤
            // 模塊別名相對于當前上下文導入
        },
        /* 可供選擇的別名語法（點擊展示） */
        /* 高級解析選項（點擊展示） */
    },
    devServer: {
        host: '127.0.0.1',
        port: '8899',
        contentBase: path.join(__dirname, 'dist'), // boolean | string | array, static file location
        compress: true, // enable gzip compression
        hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
        // ...
    },
    mode: 'development',
    // 插件
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html', // 生成的文件名稱
            template: 'index.html', // 指定用index.html做模版
            inject: 'body' // 指定插入的<script>標簽在body底部
        })
    ]
}

7.安裝解析依賴https://github.com/webpack/webpack-dev-server

npm i webpack-dev-server cross-env --save-dev

8.修改package.json文件

 "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack --progress --colors",
      "dev": "webpack-dev-server --progress --colors",
      "start": "npm run dev"
  },

9.配置babel,創(chuàng)建.babelrc文件
修改webpack.config.js

// 配置babel
{
    "presets": [
        ""@babel/preset-env""
    ],
    "plugins": [
        "transform-vue-jsx"
    ]
}

如果編譯時報錯的話可能是因為你沒有安裝依賴:

npm i --save babel-plugin-syntax-jsx
 npm i --save babel-preset-env
 npm install babel-plugin-transform-vue-jsx --save

10.主要文件：
app.vue：

<template>
    <div>測試</div>
</template>
<script>
export default {
    
}
</script>
<style scoped>

</style>

index.js:

import Vue from 'vue';
import App from './App.vue';

new Vue({
    render:h=>h(App)
}).$mount('#app')

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Vue項目文件夾大致參考

—— src
  |—— assets // 項目資源目錄
          |——api // 封裝ajax請求
      |—— styles // 樣式文件
          |—— reset.scss // reset css，會在 /src/main.js 中被導入
          |—— variables.scss // 項目中的變量，混合（mixin）等公有樣式變量
          |—— ...
      |—— images // 圖片
      |—— fonts // 字體
      |—— ...
  |—— components // 組件目錄
      |—— layout // 布局相關組件
          |—— Header.vue // 頭部
          |—— BottomMenu.vue // 底部菜單
          |—— ...
      |—— common // 公有組件
      |—— base // 基礎組件
      |—— ...
  |—— pages // 頁面目錄
      |—— user // 用戶相關頁面
          |—— Login.vue // 登錄頁面
          |—— Register.vue // 注冊頁面
          |—— Info.vue // 詳情頁面
      |—— order // 訂單相關頁面
          |—— List.vue // 訂單列表
          |—— Detail.vue //訂單詳情
          |—— ...
      |—— Home.vue // 主頁
          |——mixins 
      |—— ...
  |—— router // 路由
      |—— modules // 存放各個模塊的路由
          |—— user.js // 用戶模塊
          |—— order.js // 訂單模塊
      |—— index.js // 路由主js，整合各個模塊，并且還會定義一些全局鉤子等其他
  |—— store // 全局狀態(tài)管理目錄
      |—— mutation-types.js // mutation types
      |—— index.js // 主js，整合各個模塊的
      |—— actions.js // actions
      |—— modules // 各個模塊的states
          |—— user.js
          |—— order.js
  |—— common // 全局工具方法
      |—— data-format.js // 數(shù)據(jù)轉換
      |—— http.js // 網(wǎng)絡請求
      |—— ...
  |—— App.vue
  |—— main.js
  |—— init-plugins.js // 依賴的第三方的初始化，會在main.js中引入

1.混入 (mixins) 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式?；烊雽ο罂梢园我饨M件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。
mixins文件夾下可以寫各種調(diào)用ajax請求方法的方法，然后在需要調(diào)用這些方法請求數(shù)據(jù)的文件中：

import getCourseList from '@/pages/mixins/getCouseList';

export default {
  mixins: [getCourseList],
}

 // 調(diào)用方法請求列表
  created() {
    this.getAllDemoClass();
  },

這里的getCourseList文件中有請求需要的參數(shù)以及請求完成之后獲取的數(shù)據(jù) 直接在文件類似this.getAllDemoClass();就能調(diào)用方法

2.components通用組件存放文件夾：
在這個文件夾下封裝了項目需要的組件 然后在components下的index.js中向外暴露即可 然后在使用組件的文件中引用components即可

//業(yè)務組件
export { default as HeadBox } from './layout/head-box';
export { default as FootBox } from './layout/foot-box';


import { HeadBox, FootBox } from '@/pages/components';

components: { HeadBox, FootBox },

后續(xù)：
1.引入ant-design-vue：
具體引入操作可見官網(wǎng)https://vue.ant.design/docs/vue/introduce-cn/

npm install ant-design-vue --save
按需引入：
npm install babel-plugin-import --save-dev

2.引入Vue Routerhttps://router.vuejs.org/zh/installation.html

npm install vue-router

路由配置文件：router/index.js

import Vue from "vue";
import Router from "vue-router";
// 引入模塊
import Views from "../views/index.vue";
const News = resolve=>require(['../news/index.vue'],resolve)

Vue.use(Router);

const routes = [
    {
        path:"/view",
        name:"views",
        component:Views
    },{
        path:"/news",
        name:"news",
        component:News
    },
  ];
  const router = new Router({routes});

  export default  router

3.引入vuex

npm i vuex --save

新建store/index.js

import Vuex from "vuex";
import Vue from "vue";

const GET_COUNT_ADD = "getcountadd";
const GET_COUNT_REDUCE = "getcountreduce";

Vue.use(Vuex)

const state = {
    count: 1,
};
const getters = {
    count: function (state) {
        return state.count
    }
};
const mutations = {
    [GET_COUNT_ADD](state, data ) {
        state.count += data;
    },
    [GET_COUNT_REDUCE](state, data ) {
        state.count -= data
    }
};

const actions = {
    getCountAdd({
        commit,
        state
    }, data) {
        commit(GET_COUNT_ADD, data);
    },
    getCountReduce({
        commit,
        state
    }, data) {
        commit(GET_COUNT_REDUCE, data);
    }
};
const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})
export default store;

news/index.vue

<template>
    <div>
        <h1>{{count}}</h1>
        <Button @click="getCountAdd(1)">Click Add</Button>
        <Button @click="getCountReduce(1)">Click Reduce</Button>
    </div>
</template>
<script>
import store from "../store/index";
import {mapGetters,mapActions} from "vuex";
import {Button} from "ant-design-vue";
export default {
    store,
    components:{
        Button
    },
    computed:mapGetters(["count"]),
    methods:{
        ...mapActions(['getCountAdd','getCountReduce'])
    }
}
</script>

4.頁面頂部進度條插件Nprogress

 npm install --save nprogress

使用：

在入口文件：
// 引入頂部進度條依賴nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


// 配置NProgress進度條選項  —— 動畫效果
NProgress.configure({ ease: 'ease', speed: 500 })


router.beforeEach((to, from, next) => {
    NProgress.start();
    next();
});

router.afterEach(transition => {
    NProgress.done();
});