全棧的自我修養: 使用@vue/cli進行vue.js環境搭建

Success, real success, is being willing to do the things that other people are not.成功，真正的成功，是愿意做別人不愿意做的事情。

Table of Contents

前言刪代碼,不用跑路安裝@vue/cli創建 Vue 項目項目結構vue-cli3.0修改端口號使用 elementUI安裝 Vuex安裝 axiosgithub參考

當你看到這篇文章的時候，暫且認為你對如何做一個網站有了興趣.

前言

上一篇講述了使用?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-frontendVue?CLI?v4.4.6??Please?pick?a?preset:?default?(babel,?eslint)??Pick?the?package?manager?to?use?when?installing?dependencies:?YarnVue?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.2info?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-frontendepimetheus/epimetheus-frontend$?(master)?yarn?serveyarn?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?進行安裝

這里使用了?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?=?falsenew?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?=?falsenew?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?=?falsenew?Vue({??store,??render:?h?=>?h(App),}).$mount('#app')

github

https://github.com/zhangyunan1994/epimetheus-frontend

參考

@vue/cli : https://cli.vuejs.org/zh/guide/

在這里插入圖片描述

總結

以上是生活随笔為你收集整理的vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。