<h1> 全棧的自我修養(yǎng): 使用@vue/cli進(jìn)行vue.js環(huán)境搭建 </h1>
Success, real success, is being willing to do the things that other people are not.
成功漏设，真正的成功超营，是愿意做別人不愿意做的事情。
Table of Contents
當(dāng)你看到這篇文章的時(shí)候茸俭，暫且認(rèn)為你對(duì)如何做一個(gè)網(wǎng)站有了興趣.
前言
上一篇講述了使用 vue-cli 搭建 epimetheus-frontend, 在一些老項(xiàng)目中確實(shí)是這樣的, 不過(guò)前端框架發(fā)版就和坐火箭??一樣, 你方唱罷我登場(chǎng), 一代新人換舊人, 今天來(lái)介紹下 @vue/cli 的使用
Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)全谤，提供：
- 通過(guò) @vue/cli 實(shí)現(xiàn)的交互式的項(xiàng)目腳手架肤晓。
- 通過(guò) @vue/cli + @vue/cli-service-global 實(shí)現(xiàn)的零配置原型開(kāi)發(fā)。
- 一個(gè)運(yùn)行時(shí)依賴 (@vue/cli-service)啼县，該依賴：
- 可升級(jí)材原；
- 基于 webpack 構(gòu)建，并帶有合理的默認(rèn)配置季眷；
- 可以通過(guò)項(xiàng)目?jī)?nèi)的配置文件進(jìn)行配置余蟹；
- 可以通過(guò)插件進(jìn)行擴(kuò)展。
- 一個(gè)豐富的官方插件集合子刮，集成了前端生態(tài)中最好的工具威酒。
- 一套完全圖形化的創(chuàng)建和管理 Vue.js 項(xiàng)目的用戶界面窑睁。
Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接葵孤，這樣你可以專注在撰寫(xiě)應(yīng)用上担钮，而不必花好幾天去糾結(jié)配置的問(wèn)題。與此同時(shí)尤仍，它也為每個(gè)工具提供了調(diào)整配置的靈活性箫津，無(wú)需 eject。
Vue CLI 的介紹來(lái)自于官網(wǎng)宰啦，文末有對(duì)應(yīng)的參考地址
刪代碼,不用跑路
刪代碼苏遥，作為程序員來(lái)說(shuō)應(yīng)該是一件非常身心愉悅的事情
在上一篇文檔我們已經(jīng)使用老版的 vue-cli 創(chuàng)建了 epimetheus-frontend, 首先第一步我們先刪除了他
epimetheus$ rm -rf epimetheus-frontend
因?yàn)樾吕习姹镜?vue cli 都是使用的 vue 命令，此時(shí)需要把上次安裝的 vue-cli 卸載
epimetheus$ npm uninstall vue-cli -g
這樣我們又有一個(gè)干凈的環(huán)境了
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)赡模。
安裝@vue/cli
在上篇中田炭，我們使用了 npm install -g vue-cli 完成 vue-cli 的安裝
作為新版本，Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli. 我們需要執(zhí)行以下命令安裝
epimetheus$ npm install -g @vue/cli
安裝速度還是比較慢的漓柑，大家可以喝杯水
安裝完成后可以 vue --version 看下版本號(hào)
epimetheus$ vue --version
@vue/cli 4.4.6
創(chuàng)建 Vue 項(xiàng)目
這里我們繼續(xù)創(chuàng)建一遍 epimetheus-frontend
- 我們還是進(jìn)入上次創(chuàng)建的
epimetheus目錄 - 執(zhí)行
vue create epimetheus-frontend創(chuàng)建項(xiàng)目
第一步會(huì)提示選擇一個(gè)preset, 這里選擇默認(rèn)的 Babel + ESLint
第二步會(huì)提示選擇package manager, 這里我們還是選擇 Yarn
安裝過(guò)程可能有點(diǎn)慢教硫，安裝完成后,如下
epimetheus$ vue create epimetheus-frontend
Vue CLI v4.4.6
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn
Vue CLI v4.4.6
? Creating project in /Users/zhangyunan/project/scoding/epimetheus/epimetheus-frontend.
?? Initializing git repository...
?? Installing CLI plugins. This might take a while...
yarn install v1.15.2
info No lockfile found.
[1/4] ?? Resolving packages...
success Saved lockfile.
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
? Done in 30.95s.
?? Invoking generators...
?? Installing additional dependencies...
yarn install v1.15.2
[1/4] ?? Resolving packages...
[2/4] ?? Fetching packages...
[3/4] ?? Linking dependencies...
[4/4] ?? Building fresh packages...
success Saved lockfile.
? Done in 5.79s.
? Running completion hooks...
?? Generating README.md...
?? Successfully created project epimetheus-frontend.
?? Get started with the following commands:
$ cd epimetheus-frontend
$ yarn serve
從上面的提示中，我們看到默認(rèn)創(chuàng)建了一個(gè) git 項(xiàng)目.
根據(jù)最后提示辆布，我們可以進(jìn)入 epimetheus-frontend, 并在控制臺(tái)運(yùn)行 yarn serve,即可開(kāi)始運(yùn)行我們的項(xiàng)目
epimetheus$ cd epimetheus-frontend
epimetheus/epimetheus-frontend$ (master) yarn serve
yarn run v1.15.2
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 2275ms 下午10:13:29
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.4:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
從控制臺(tái)信息可以看出瞬矩，訪問(wèn)路徑為：http://localhost:8080
這樣準(zhǔn)備工作基本就完成了
項(xiàng)目結(jié)構(gòu)
相信開(kāi)發(fā)上篇文檔，已經(jīng)可以使用 code 命令谚殊，如果還是不能使用丧鸯，可以根據(jù)下面的提示進(jìn)行安裝，這里我們直接使用 code . 打開(kāi)當(dāng)前目錄
例如：
epimetheus/epimetheus-frontend$ code .
則會(huì)將當(dāng)前文件夾 epimetheus/epimetheus-frontend 在 VSCode 中打開(kāi)嫩絮，
如何你安裝
VSCode后丛肢，使用code命令時(shí)，提示 not fund, 可以通過(guò) 查看 -> 命令面板 輸入code進(jìn)行安裝
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-jvkCJ2Uz-1593393770883)(img/vscode_install_code.png)]
這里使用了 VSCode,打開(kāi)項(xiàng)目后如圖：
├── README.md # Default README file
├── babel.config.js
├── package.json # build scripts and dependencies
├── public
│ ├── favicon.ico
│ └── index.html # index.html template
├── src
│ ├── App.vue # main app component
│ ├── assets # module assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ └── main.js # app entry file
└── yarn.lock
vue-cli3.0修改端口號(hào)
其中剿干，我們主要修改 src 下文件蜂怎，上面提到項(xiàng)目訪問(wèn)端口為：8080, 為了防止與其他項(xiàng)目造成沖突，這里將端口改為：7000, 提供兩種方式：
- package.json文件下修改 --port
"scripts": {
"serve": "vue-cli-service serve --port 7000",
}
- 在
package.json同級(jí)目下創(chuàng)建vue.config.js, 并添加以下內(nèi)容
module.exports = {
devServer: {
port: 7000
}
}
兩種方式均可
使用 elementUI
這里使用了
官網(wǎng)：http://element-cn.eleme.io/#/zh-CN/component/installation
這里我們進(jìn)入剛才的項(xiàng)目目錄：并執(zhí)行 yarn add element-ui
并配置 main.js
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
安裝 Vuex
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式置尔。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)杠步，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension榜轿，提供了諸如零配置的 time-travel 調(diào)試幽歼、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。
也就是通過(guò) Vuex 谬盐，各個(gè)組件可以實(shí)時(shí)的共享狀態(tài)
官網(wǎng)：https://vuex.vuejs.org/zh-cn/intro.html
安裝
首先我們先安裝它 yarn add vuex
配置
首先在 src 下創(chuàng)建 store 文件夾并在其下創(chuàng)建 store.js 文件
即 src/store/store.js, 同時(shí)創(chuàng)建 src/assets/util/cookie.js
src/assets/utils/cookie.js 文件內(nèi)容
該文件主要用于操作cookie
let cookie = {
setCookie (cname, value, expiredays) {
let exdate = new Date()
exdate.setTime(exdate.getTime() + expiredays)
exdate.setDate(exdate.getDate() + expiredays)
document.cookie = cname + '=' + escape(value) + ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
},
getCookie (name) {
let reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
let arr = document.cookie.match(reg)
if (arr) {
return (arr[2])
} else {
return null
}
},
delCookie (name) {
let exp = new Date()
exp.setTime(exp.getTime() - 1)
let cval = cookie.getCookie(name)
if (cval != null) {
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
}
}
}
export default cookie
src/store/store.js 內(nèi)容
這里定義了 userInfo 用來(lái)保存當(dāng)前的用戶信息甸私，包含一個(gè) name 和 token
import Vue from 'vue'
import Vuex from 'vuex'
import cookie from '../assets/utils/cookie'
Vue.use(Vuex)
const userInfo = {
name: cookie.getCookie('name') || '',
token: cookie.getCookie('token') || ''
}
const store = new Vuex.Store({
state: {
userInfo: userInfo
},
mutations: {
setUserInfo (state) {
state.userInfo = {
name: cookie.getCookie('name'),
token: cookie.getCookie('token'),
}
}
}
})
export default store
在 main.js 添加Vuex配置，
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store/store'
import App from './App.vue'
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
安裝 axios
Promise based HTTP client for the browser and node.js
axios 是一個(gè)基于 Promise 的 http client, 通過(guò)他飞傀，我們向后端進(jìn)行數(shù)據(jù)交互皇型，如果你不喜歡它诬烹，可以使用jquery的 ajax 代替.
我們來(lái)安裝一下 yarn add axios
最終 main.js
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store/store'
import App from './App.vue'
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
github
參考
- @vue/cli : https://cli.vuejs.org/zh/guide/
