Vue管理系統前端系列一vue-cli4.x 初始化項目

時間 2020-08-21

標籤 vue 管理系統前端系列 cli4.x cli 初始化項目简体版

原文原文鏈接

項目介紹

lion-ui 是一個基於 RBAC 的管理系統前端項目，採用 vue 和 element-ui 前端技術棧，實現了登陸權限驗證，根據權限動態生成菜單等功能。使用 vue-cli4.x 初始化項目。
開發時採用 fastmock 來進行模擬請求數據。css

暫時前端項目只有master分支，數據都是mock的，有基本輪廓，可clone下來快速開發。根據需求調整。後端系統將搭配 netcore3.1 敬請期待html

我的域名文檔教程
文檔教程git

博客園文檔
文檔教程es6

技術基礎

該系列文章涉及到如下幾個知識點，請先熟悉相關文檔github

vue.js 2.x 中文, 優秀的 JS 框架
vue-router, vue.js 配套的路由
vuex，vue.js 應用狀態管理庫
Element UI，餓了麼提供的 UI 框架

開發環境

Node JS（npm）下載地址
Visual Studio Code（前端 IDE）下載地址

安裝工具

目前版本基於 webpack 4.0+ 和 vue-cli 4.x 版本構建，須要 Node.js 8.9 或更高版本(該項目使用的是 12.18.1)，相關知識能夠自行進官網進行了解. 如有多個 node 版本，可使用 nvm來進行管理web

安裝打包工具 webpack，-g 表示全局安裝。

npm install webpack -g

安裝 vue 腳手架項目初始化工具 vue-cli，-g 表示全局安裝。
若是你以前都是基於 vue-cli2.X,你須要先卸載它：

#如有，則先卸載vue-cli
npm uninstall -g vue-cli
#安裝cli4.x
npm i -g @vue/cli
#或者 vue -V  查看版本是否爲4.x
vue --version

Vue CLI >= 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍是想繼續使用 2.x 搭建項目，你能夠全局安裝一個橋接工具：

npm install -g @vue/cli-init
# 而後你就能夠繼續使用vue init了
npm init webpack my-project

有時候 npm 的下載速度比較感人，建議設置淘寶鏡像

npm config set registry=http://registry.npm.taobao.org -g
#配置後可經過下面方式來驗證是否成功 ：
npm config get registry

快速原型開發

tips:適用於開發單頁面宣傳，庫，組件等使用。

使用 vue serve 和 vue build 命令對單個 *.vue 文件進行快速原型開發,
前提是得安裝一個額外的全局擴展： npm install -g @vue/cli-service-global

在一個空的文件夾中，新建一個 .vue文件，執行下面命令就能看到效果

#啓動服務
vue serve test.vue
#打包出生產環境的包
vue build test.vue

建立項目

vue create lion-ui

點擊回車後，就會有各類選項，須要進行選擇，步驟以及個人選項以下：

兩個選擇，經過上下鍵操做：

default (babel, eslint) 默認配置提供 babel 和 eslint 支持
Manually select features 本身手動去選擇須要的配置

這裏選擇的是手動去配置的選項。而後須要哪一個選項就在哪一個選項上按空格，就能選中/取消。

每一項的功能，作一下簡單闡述：

Babel 主要是對 es6 語法轉換成兼容的 js （選上）

TypeScript 支持使用 TypeScript 語法來編寫代碼

PWA PWA 支持

Router 支持 vue 路由配置插件（通常都會選擇）

Vuex 支持 vue 程序狀態管理模式 (通常都會選擇)

CSS Pre-processors 支持 css 預處理器（通常都會選擇）

Linter / Formatter 支持代碼風格檢查和格式化（選上）

Unit Testing 單元測試

E2E Testing E2E 測試

通常通用的選擇以下：

當選擇完成後，點擊回車，會對每一個配置進行我的須要的配置操做，
當前操做配置以下：

1. 是否採用 history 模式，若是選擇 Y,須要後臺配置具體看 vueRouter 官網解釋，這裏我門選擇 n。
1. 選擇一種 css 預處理,項目通常採用 scss,選擇第一個。
1. 選擇格式化代碼方式，通常選擇 ESlint + Prettier。
1. 代碼規則檢測，通常會選擇保存就檢測 Lint on save。
1. 配置 Babel,PostCSS,ESLint 放在哪兒，這裏選擇的是專門的位置。
1. 是否記錄當前項目配置，以方便下次建立項目可直接使用當前配置。快速建立。

根據提示，執行指令 cd project 而後執行命令npm run serve 啓動項目。

發佈項目爲 npm run build

配置相關說明

當須要自定義 webpack 相關配置的時候,須要在項目根目錄中建立vue.config.js文件，它會被@vue/cli-server自動加載，
相關配置內容官網將的很詳細，能夠點擊查看

目錄結構

整個項目的目錄結構：

├── public                     # 靜態資源
│   ├── favicon.ico            # favicon圖標
│   └── index.html             # html模板
├── src                        # 源代碼
│   ├── api                    # 全部請求
│   │    └── modules          # 請求接口的各個模塊
│   ├── assets                 # 圖片、字體等靜態資源
│   │    ├──img                # 圖片靜態資源
│   │    └──styles             # 全局樣式等靜態資源
│   ├── components             # 全局公用組件
│   ├── layout                 # 頁面總體佈局盒子
│   ├── plugins                # 全局插件部分
│   ├── router                 # 路由
│   ├── store                  # 全局store管理
│   │    └── modules          # 各個模塊狀態管理
│   ├── utils                  # 全局公用方法
│   ├── views                  # views全部頁面
│   ├── App.vue                # 入口頁面
│   ├── main.js                # 入口文件 加載組件 初始化等
├── .borwserslistrc            # 瀏覽器兼容相關
├── .env.xxx                   # 環境變量配置
├── .eslintrc.js               # eslint 配置項
├── .gitignore                 # git忽略文件設置
├── .babel.config.js           # babel-loader 配置
├── package.json               # package.json
└── vue.config.js              # vue-cli 配置

原文地址：http://book.levy.net.cn/doc/frontend/uiframe/env.html