全棧的自我修養: 使用@vue/cli進行vue.js環境搭建
Success, real success, is being willing to do the things that other people are not.
成功,真正的成功,是願意做別人不願意做的事情。
Table of Contents
當你看到這篇文章的時候,暫且認爲你對如何做一個網站有了興趣.
前言
上一篇講述了使用 vue-cli
搭建 epimetheus-frontend
, 在一些老項目中確實是這樣的, 不過前端框架發版就和坐火箭🚀一樣, 你方唱罷我登場
, 一代新人換舊人, 今天來介紹下 @vue/cli
的使用
Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統,提供:
- 通過 @vue/cli 實現的交互式的項目腳手架。
- 通過 @vue/cli + @vue/cli-service-global 實現的零配置原型開發。
- 一個運行時依賴 (@vue/cli-service),該依賴:
- 可升級;
- 基於 webpack 構建,並帶有合理的默認配置;
- 可以通過項目內的配置文件進行配置;
- 可以通過插件進行擴展。
- 一個豐富的官方插件集合,集成了前端生態中最好的工具。
- 一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。
Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基於智能的默認配置即可平穩銜接,這樣你可以專注在撰寫應用上,而不必花好幾天去糾結配置的問題。與此同時,它也爲每個工具提供了調整配置的靈活性,無需 eject。
Vue CLI 的介紹來自於官網,文末有對應的參考地址
刪代碼,不用跑路
刪代碼,作爲程序員來說應該是一件非常身心愉悅的事情
在上一篇文檔我們已經使用老版的 vue-cli
創建了 epimetheus-frontend
, 首先第一步我們先刪除了他
epimetheus$ rm -rf epimetheus-frontend
因爲新老版本的 vue cli
都是使用的 vue
命令,此時需要把上次安裝的 vue-cli
卸載
epimetheus$ npm uninstall vue-cli -g
這樣我們又有一個乾淨的環境了
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
. 我們需要執行以下命令安裝
epimetheus$ npm install -g @vue/cli
安裝速度還是比較慢的,大家可以喝杯水
安裝完成後可以 vue --version
看下版本號
epimetheus$ vue --version
@vue/cli 4.4.6
創建 Vue 項目
這裏我們繼續創建一遍 epimetheus-frontend
- 我們還是進入上次創建的
epimetheus
目錄 - 執行
vue create epimetheus-frontend
創建項目
第一步會提示選擇一個preset
, 這裏選擇默認的 Babel + ESLint
第二步會提示選擇package manager
, 這裏我們還是選擇 Yarn
安裝過程可能有點慢,安裝完成後,如下
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
從上面的提示中,我們看到默認創建了一個 git
項目.
根據最後提示,我們可以進入 epimetheus-frontend
, 並在控制檯運行 yarn serve
,即可開始運行我們的項目
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.
從控制檯信息可以看出,訪問路徑爲:http://localhost:8080
這樣準備工作基本就完成了
項目結構
相信開發上篇文檔,已經可以使用 code
命令,如果還是不能使用,可以根據下面的提示進行安裝,這裏我們直接使用 code .
打開當前目錄
例如:
epimetheus/epimetheus-frontend$ code .
則會將當前文件夾 epimetheus/epimetheus-frontend
在 VSCode
中打開,
如何你安裝
VSCode
後,使用code
命令時,提示 not fund, 可以通過 查看 -> 命令面板 輸入code
進行安裝
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jvkCJ2Uz-1593393770883)(img/vscode_install_code.png)]
這裏使用了 VSCode
,打開項目後如圖:
├── 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修改端口號
其中,我們主要修改 src 下文件,上面提到項目訪問端口爲:8080
, 爲了防止與其他項目造成衝突,這裏將端口改爲:7000
, 提供兩種方式:
- package.json文件下修改 --port
"scripts": {
"serve": "vue-cli-service serve --port 7000",
}
- 在
package.json
同級目下創建vue.config.js
, 並添加以下內容
module.exports = {
devServer: {
port: 7000
}
}
兩種方式均可
使用 elementUI
這裏使用了
官網:http://element-cn.eleme.io/#/zh-CN/component/installation
這裏我們進入剛纔的項目目錄:並執行 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 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension,提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
也就是通過 Vuex ,各個組件可以實時的共享狀態
官網:https://vuex.vuejs.org/zh-cn/intro.html
安裝
首先我們先安裝它 yarn add vuex
配置
首先在 src
下創建 store
文件夾並在其下創建 store.js
文件
即 src/store/store.js
, 同時創建 src/assets/util/cookie.js
src/assets/utils/cookie.js 文件內容
該文件主要用於操作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 內容
這裏定義了 userInfo
用來保存當前的用戶信息,包含一個 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 是一個基於 Promise 的 http client, 通過他,我們向後端進行數據交互,如果你不喜歡它,可以使用jquery
的 ajax
代替.
我們來安裝一下 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
https://github.com/zhangyunan1994/epimetheus-frontend
參考
- @vue/cli : https://cli.vuejs.org/zh/guide/