通過Vue-cli4搭建vue+element UI項目

Vue cli3是一個交互式的項目腳手架。通過vue create可以快速搭建一個新項目，它包含了加載其它CLI插件的核心服務，並且提供了一個針對絕大部分應用優化過的內部的webpack配置，項目內部的vue-cli-service 命令，提供 serve、build 和 inspect 命令。

vue/cli4+elementUi項目的搭建

1. node版本要求Node>=8.9，運行npm install @vue/cli -g命令，安裝vue-cli

2. 運行vue create projectName，創建vue項目，projectName是項目名

   vue-cli3支持Prompt(問詢)，根據詢問內容最終生成項目

   選擇手動配置還是默認配置，這里選擇Manually select features(手動配置)

 

1.PNG

選擇項目需要添加的插件

Babel：將ES6編譯ES5 Router：支持vue-router

Vuex：支持vuex CSS Pre-processors：支持css預處理器

Linter/Formatter：支持代碼風格檢查和格式化

 

2.PNG

添加CSS Pre-processors后，需要選擇CSS預處理器

 

3.PNG

是否使用路由的history模式

選擇hash模式，也是默認模式，通過修改#號之后的值改變頁面路由，打包之后可以放到服務器之后可以直接使用。history模式服務器需要做額外的設置。

 

4.PNG

Eslint代碼驗證規則

 

5.PNG

選擇在什么階段進行代碼檢測：選擇保存時檢測，可以實時修改，不必等到提交時修改

 

6.PNG

Babel，Eslint等插件的配置信息，放在一個獨立的文件下

 

7.PNG

3. vue-cli引入Element組件

   Element為vue-cli提供了Element插件，vue add element

4. ajax請求

首先，需要配置環境變量

.env.development

# 開發環境
NODE_ENV='development'
VUE_APP_HTTP_HEADER={}
VUE_APP_HTTP_BASE_URL=''
VUE_APP_HTTP_NOAUTH_BASE_URL=''

.env.test

# 測試環境
NODE_ENV='production'
VUE_APP_DEBUG='false'
VUE_APP_HTTP_HEADER={}
VUE_APP_HTTP_BASE_URL=''
VUE_APP_HTTP_NOAUTH_BASE_URL=''

.env.production

# 生產環境
NODE_ENV='production'
VUE_APP_DEBUG='false'
VUE_APP_HTTP_HEADER={}
VUE_APP_HTTP_BASE_URL=''
VUE_APP_HTTP_NOAUTH_BASE_URL=''

axios配置

import axios from 'axios' import { requestBefore, requestError, responseAfter, responseError } from './interceptors' const http = axios.create({ baseURL: process.env.VUE_APP_HTTP_BASE_URL, // timeout: 10000, // axios請求超時時間設置 }) // 對所有axios請求信息和返回信息進行統一處理 http.interceptors.request.use(requestBefore, requestError) http.interceptors.response.use(responseAfter, responseError) export default http 

5. mock數據的使用

   在public文件夾下建立mock文件夾，存儲mock數據

   在vue.config.js中配置devServer

   devServer: { proxy: { // 本地代理 '/api': { // 將axios請求轉發到本地 獲取mock數據 target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '/mock' } } } }, 

6. vue.config.js中chainWebpack配置

   chainWebpack: config => { config.resolve.alias .set("@", resolve("src")) .set("&", resolve("src/components")) .set("utils", resolve("src/utils")) }, 

   可以簡化代碼中引入其他文件的書寫，減小出錯率

7. 1. elslint配置文件

   module.exports = { root: true, env: { node: true, // node 環境及全局變量 browser: true, // 瀏覽器環境及全局變量 es6: true // es6環境及全局變量 }, plugins: ["vue"], extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], parserOptions: { parser: "babel-eslint" }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off" }, }; 

8. gitlab配置

   // 已存在代碼文件夾 Existing folder cd existing_folder git init git remote add origin url git add . git commit -m "Initial commit" git push -u origin master 

 

 

0人點贊

 

日記本

 

 

作者：a095
鏈接：https://www.jianshu.com/p/76e3396a051f
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。