針對剛接觸 JavaScript 模塊開發系統的用戶

????????vue官方建議我們參考?Vue CLI 3。只要遵循指示，就能很快地能運行一個帶有?.vue?組件、ES2015、webpack 和熱重載 (hot-reloading) 的 Vue 項目！

通過Vue CLI 快速創建一個基礎的vue項目，官方介紹就有3種，這里以第3種為例(新手可以使用第2種，圖形化界面，傻瓜式點點點)

?

一、模塊化開發——構建項目

1、全局安裝 webpack

(cmd窗口輸入如下命令,后面不再說明)

npm install webpack -g

2、全局安裝 Vue 腳手架

npm install -g @vue/cli-init

3、初始化 Vue 項目

在項目文件夾下，輸入如下命令，并按照提示完成操作，可以默認全部回車。

//vue 腳手架使用 webpack 模板初始化一個名為 appname 的項目 vue init webpack appname

4、啟動 vue 項目?

項目的 package.json 中 有scripts,代表我們能運行的命令。

項目路徑下輸入命令，啟動項目：?

npm run dev?

---

二、模塊化開發——說明

1、項目結構

目錄結構

├── README.md??????????? 項目介紹

├── index.html?????????? 入口頁面

├── build????????????? 構建腳本配置文件目錄

│? ├── build.js??????????? 生產環境構建腳本

│? ├── utils.js??????????? 構建相關工具方法

│? ├── webpack.base.conf.js????? wabpack基礎配置

│? ├── webpack.dev.conf.js?????? wabpack開發環境配置

│? └── webpack.prod.conf.js????? wabpack生產環境配置

├── config???????????? 項目配置文件目錄

│? ├── dev.env.js?????????? 開發環境變量

│? ├── index.js? ? ? ? ? ? ? ?項目配置文件

│? ├── prod.env.js?????????? 生產環境變量

├── package.json????????? npm包配置文件，里面定義了項目的npm腳本，依賴包等信息

├── src?????????????? 源碼目錄?

│? ├── main.js? ? ? ? ? ? ?主入口 js文件

│? ├── App.vue????????????根組件

│? ├── components??????公共組件目錄

│? ├── assets? ? ? ? ? ? ? ? 資源目錄(這里的資源會被wabpack構建)

│? │??? └── logo.png? ? ?Vue 的logo圖片

│? ├── routes???????????? 前端路由目錄

│? │? └── index.js

├── static???????????? 純靜態資源（不會被wabpack構建）

---

2、Vue 單文件組件

格式為："xxx.vue"的文件, 三段式<template>，<script>，<style>

詳情點擊?Vue 單文件組件官網說明

---

三、模塊化開發——常用工具

1、VScode 添加代碼片段（快速生成 Vue模板）

由于，經常需要編寫"xxx.vue"單文件組件，代碼格式是一樣的，為減少重復勞動，可以使用VsCode用戶片段功能快速生成Vue模板。步驟如下：

文件 ——> 首選項 ——> 用戶片段 ——> 新建全局代碼片段文件

復制粘貼代碼片段：

{"生成Vue模板": {"prefix": "vue", //任意目錄輸入快捷鍵"vue"回車即可獲取此模板"body": ["<template>","<div></div>","</template>","","<script>","//這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）","//例如：import?《組件名稱》?from?'《組件路徑》';","","export default {","//import引入的組件需要注入到對象中才能使用","components: {},","props: {},","data() {","//這里存放數據","","return {};","},","//計算屬性?類似于data概念","computed: {},","//監控data中的數據變化","watch: {},","//方法集合","methods: {},","//生命周期?-?創建完成（可以訪問當前this實例）","created() {},","//生命周期?-?掛載完成（可以訪問DOM元素）","mounted() {},","beforeCreate() {}, //生命周期?-?創建之前","beforeMount() {}, //生命周期?-?掛載之前","beforeUpdate() {}, //生命周期?-?更新之前","updated() {}, //生命周期?-?更新之后","beforeDestroy() {}, //生命周期?-?銷毀之前","destroyed() {}, //生命周期?-?銷毀完成","activated() {} //如果頁面有keep-alive緩存功能，這個函數會觸發","};","</script>","","<style?scoped>","</style>"]} }

輸入快捷鍵“vue”,回車即可快速生成代碼片段。

2、導入 Element-UI 快速開發

官方原話：“Element，一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫”

//npm 安裝(i是install縮寫) npm i element-ui -S

詳情使用說明點擊Elememt-UI 官方文檔

總結

以上是生活随笔為你收集整理的Vue 模块化开发（构建项目常用工具）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。