一、項目創建
1、安裝vue3環境
vue install -g vue@cli【vue需要是3.0以上版本，通過vue --version驗證】
2、創建新項目
vue create project-name
3、運行項目
npm run serve
二、選擇項目配置
1、選擇配置方式：第一個爲默認配置，第二個爲手動配置（下鍵切換）
2、選擇手動配置之後，你可以選擇需要哪些配置項。空格是選中和取消，a鍵是全選，i鍵是反選。
這裏我選擇了babel轉換器，Router路由，vuex狀態管理，css預處理器，eslint風格檢查。
3、回車之後還會有一些選項需要確認。這一項是詢問是否開啓路由的history歷史模式，輸入Y就開始歷史模式，輸入n就使用默認的hash哈希模式。【history模式頁面跳轉無需重新加載頁面，但需要後臺配合。hash模式使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新加載。】
4、接下來需要選擇css預處理器。【根據項目需要用到的UI組價庫選擇，例如：iview作爲UI組件庫，而它是基於less開發的，所以這裏我選less。】
5、接下來需要選擇eslint的配置，這裏我選擇的是標準配置，在保存時進行代碼檢查。
6、選擇代碼檢查時間：在保存時進行代碼檢查
7、最後一項是選擇在哪裏存放Babel，postcss，eslint等配置。如果項目不大可以選擇放在package.json裏面。但是爲了規範起見，最好還是選擇第一項，放在專用的配置文件中。
8、最後還會詢問你是否將本次配置作爲以後的默認配置，建議N，因爲每個項目的情況很可能不一樣。
最後界面如此，等待進度完成，至此項目就創建完成。
三、項目配置
創建項目完成後你會發現，現在項目的文件有所不同，會發現相比於vue-cli2.0少了build與config文件夾，所以vue-cli3提供了一個可選的配置文件 ——vue.config.js。
現有文件目錄如下：
|-- dist # 打包後文件夾
|-- public # 靜態文件夾
| |-- favicon.ico
| |-- index.html #入口頁面
|-- src # 源碼目錄
| |--assets # 模塊資源
| |--components # vue公共組件
| |--views
| |--App.vue # 頁面入口文件
| |--main.js # 入口文件，加載公共組件
| |--router.js # 路由配置
| |--store.js # 狀態管理
|-- .env.pre-release # 預發佈環境
|-- .env.production # 生產環境
|-- .env.test # 測試環境
|-- vue.config.js # 配置文件
|-- .eslintrc.js # ES-lint校驗
|-- .gitignore # git忽略上傳的文件格式
|-- babel.config.js # babel語法編譯
|-- package.json # 項目基本信息
|-- postcss.config.js # CSS預處理器(此處默認啓用autoprefixer)
vue.config.js配置
Vue.config.js是一個可選的配置文件，如果項目的根目錄存在這個文件，那麼它就會被 @vue/cli-service 自動加載。你也可以使用package.json中的vue字段，但要注意嚴格遵守JSON的格式來寫。這裏使用配置vue.config.js的方式進行處理。【詳細可參考網站vue cli配置參考】
const webpack = require('webpack')
module.exports = {
//部署應用包時的基本 URL
publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
//當運行 vue-cli-service build 時生成的生產環境構建文件的目錄
outputDir: 'dist',
//放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
assetsDir: 'assets',
// eslint-loader 是否在保存的時候檢查 安裝@vue/cli-plugin-eslint有效
lintOnSave: true,
//是否使用包含運行時編譯器的 Vue 構建版本。設置true後你就可以在使用template
runtimeCompiler: true,
// 生產環境是否生成 sourceMap 文件 sourceMap的詳解請看末尾
productionSourceMap: true,
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 爲生產環境修改配置...
} else {
// 爲開發環境修改配置...
}
},
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin 生產環境下是true,開發環境下是false
extract: true,
// 開啓 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {},
// 啓用 CSS modules for all css / pre-processor files.
modules: false
},
// webpack-dev-server 相關配置
devServer: { // 設置代理
hot: true, //熱加載
host: '0.0.0.0', //ip地址
port: 8085, //端口
https: false, //false關閉https，true爲開啓
open: true, //自動打開瀏覽器
proxy: {
'/api': { //本地
target: 'xxx',//此處爲空會報：Cannot read property 'upgrade' of undefined
// 如果要代理 websockets
ws: true,
changeOrigin: true
},
'/test': { //測試
target: 'xxx'
},
'/pre': { //預發佈
target: 'xxx'
},
'/pro': { //正式
target: 'xxx'
}
}
},
pluginOptions: { // 第三方插件配置
// ...
}
}
四、項目開發
1、接口數據模擬
很多時候前端在後端接口還沒有開發完成的時候，需要前端自己模擬數據，這個其實也很簡單。
a、創建json文件，存放數據
首先在public文件夾下新建api文件夾，然後新建data.json文件，當然新建的文件夾和json文件名字是可以隨意命名的。
{
"name": "數據名"
}
注：屬性名和屬性值要用雙引號。
b、安裝axios
npm install axios
然後再main.js文件中簡單配置
import Axios from 'axios'
Vue.prototype.axios = Axios
c、發送請求
最後就可以請求模擬的數據了，我在我新建的index.vue文件中的mounted生命週期函數中發送請求
mounted () {
this.axios.get('/api/data.json').then((res) => {
console.log(res, 'success')
}).catch((err) => {
console.log(err, 'error')
})
}
注意：請求的路徑必須和剛纔創建的文件路徑一致，否則會報404錯誤。
2、優化vuex結構
a、刪除store.js文件，然後在src中新建store文件夾，在該文件夾下新建index.js和getters.js文件，用modules來儲存各個模塊的信息，例如：創建modules/user.js文件
index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
// 在store中引入不同的模塊信息
modules: {
user
},
getters
})
export default store
getters.js文件
// 有時候我們需要從state中派生出一些狀態，比如篩選一組列表，並且這個篩選後的數據是有其他組件要用的。那麼我們就需要把這個結果進行包裝，形成共享狀態。
const getters = {
token: state => state.user.token
}
export default getters
modules/user.js
// 每個模塊都擁有自己的store，mutations，action，getters。
const user = {
// State是單一狀態樹 vuex使用單一狀態樹，那麼就可以用一個對象來包含全部的應用層級狀態。所以state就作爲數據源【組件中獲取：this.$store.state.count】
state: {
count: 1
},
// 更改Vuex的store中的狀態的唯一方法就是提交mutations。 Vuex中的mutations就像一個事件：每個mutations都有一個字符串的事件類型（type）和一個回調函數（handler）。這個回調函數接受state作爲第一個參數。
// 可以在mutations中註冊一些事件，然後在組件中觸發【this.$store.commit('add1')】
mutations: {
add1 (state) {
state.count++
},
world (state) {
state.count--
}
},
// Actions 提交的是mutations，而不是直接變更狀態。
// Actions 可以包含任意異步操作。
// Actions函數接受一個與store實例具有相同方法和屬性的context對象，因此可以通過context.commit來提交一個mutations。
// 組件中觸發【this.$store.commit('world')；this.$store.dispatch('worldasync')】
actions: {
worldasync (context) {
setInterval(() => {
context.commit('world')
}, 2000)
}
}
}
export default user
最後在main.js文件中引入vuex即可：import store from './store/index'
3、配置及讀取開發生成環境
a、在vue.config.js文件中添加配置信息
// 配置及讀取開發生產環境
chainWebpack: config => {
config.plugin('define').tap(args => {
args[0]['process.env'].BASE_URL = JSON.stringify(process.env.BASE_URL)
return args
})
}
b、創建開發環境文件：.env.dev
NODE_ENV = "dev"
BASE_URL = "https://easy-mock.com/mock/dev/api"
c、創建生成環境文件：.env.prod
NODE_ENV = "prod"
BASE_URL = "https://easy-mock.com/mock/prod/api"
d、修改package.json文件中開發和生成環境的指定mode
"serve": "vue-cli-service serve --mode dev",
"build": "vue-cli-service build --mode prod",
注：可以在main.js文件中打印：console.log(process.env)；判斷是否配置成功。
4、封裝接口請求
a、配置alias：vue.config.js中添加屬性configureWebpack
configureWebpack: () => ({
resolve: {
alias: {
'@': path.resolve('./src')
}
}
}),
b、安裝、封裝axios：
npm install axios --save
c、此處還未理解通透，下次更新
5、設置全局css樣式
a、安裝依賴：npm install node-sass
b、配置地址（在vue.config.js中）
css: {
loaderOptions: {
sass: {
prependData: `@import "~@/style/global.scss";`
}
}
},
c、創建scss文件，設置統一樣式和變量
$background:#ff0000
d、使用是需要添加lang="scss"
<style scoped lang="scss">
.title{
color: $background;
}
</style>
注：若啓動報錯，則安裝鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org
後執行：cnpm install node-sass --save
6、使用UI組件庫
a、安裝npm i element-ui
b、在main.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
7、mock模擬數據
a、安裝mock：npm install mockjs --save-dev
b、創建mock文件夾，文件夾裏面模擬數據（創建index.js文件）
// 引入mockjs
const Mock = require('mockjs')
// 獲取 mock.Random 對象
const Random = Mock.Random
// mock一組數據
const postData = function () {
let articles = []
for (let i = 0; i < 10; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的圖片'), // Random.dataImage( size, text ) 生成一段隨機的 Base64 圖片編碼
author_name: Random.cname(), // Random.cname() 隨機生成一個常見的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默認爲yyyy-MM-dd；Random.time() 返回一個隨機的時間字符串
}
articles.push(newArticleObject)
}
return {
articles: articles
}
}
// Mock.mock( url, post/get , 返回的數據)；
Mock.mock('/news/index', 'post', postData)
c、在main.js中引入mock
require('./mock')
d、在vue.config.js文件中配置接口
devServer: {
port: 8080,
before (app) {
app.post('/news/index', (req, res) => {
res.json(mockIndexData)
})
}
}
e、如果想每個文件模擬一個接口數據，可以在mock/index.js中引入就可以。（不需要配置vue.config.js就可直接使用）
在mock中創建一個get.js文件，之後再index.js文件中引入。
// 引入mockjs
const Mock = require('mockjs')
const getData = () => {
return {
name: '測試數據'
}
}
Mock.mock('/news/get', 'post', getData)
require('./get')
8、部署
npm run build
五、功能設置
1、修改網站圖標和標題
在public文件夾中有兩個文件：index.html文件和favicon.ico文件，favicon.ico即爲圖標文件，而index.html爲網頁基本設置
2、配置根目錄
在根目錄裏創建 vue.config.js這個名字的文件，在文件內寫如下代碼即可
let path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定義，比如.set('@@', resolve('src/components'))
}
}
3、引入iview ui
安裝：npm install --save iview
在main.js文件中添加
import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.use(iView)