1.前言

對于后端開發工作者來說，比較為難的一定是前端部分，除了有專門負責前端開發的大公司，其余的小公司基本上都是前后端都要自己寫的。以前對后端開發者比較友好的Layui框架作者也不維護了，我在第一年工作的時候就是用的Layui，但是對于前端的了解也只是停留在CV階段。最近我們公司在重做之前的一版系統，前端使用的是Vue框架，搭配的是Element-ui組件。我負責的是后端代碼。但是空余時間也大致看了一下前端Vue框架的搭建，搭建好之后完全可以當個輪子使用。

1.npm，yarn

這兩者的區別對于搞前端的朋友肯定特別熟悉，常年編寫后端的朋友們可能比較陌生，之前我在前面寫了一個運行命令npm run serve 和yarn run serve只是因為我負責維護的一個項目的前端也是采用了Vue框架，對于運行命令我經常忘記，所以就記錄了下來。長話短說，npm和yarn都是JS的包管理工具。
npm缺點在于：
1.下載速度慢
2.安裝時無法保持一致性，由于版本號問題，’5.0.3’代表安裝固定版本，’~5.0.3’代表安裝5.0.X中最新版本，’^5.0.3’代表安裝5.X.X中的最新版本
3.所有的包同時安裝，有一個包拋出異常，其余包會繼續下載，團隊開發時有可能會報錯
Yarn優點：
1.速度快，體現在兩個方面，并行安裝和離線模式
2.版本一致
3.輸出語句簡潔
4.更好的語義化
1.npm的安裝教程npm安裝
2.yarn安裝命令：npm install -g yarn
3.安裝node.js
查看node.js是否安裝，在vscode中打開終端，輸入node -v 顯示版本號說明安裝成功
也可以在cmd上輸入node -v來查看node環境是否安裝成功，安裝成功后npm也會被附屬安裝，查看方法同樣為 npm -v，安裝成功后會顯示版本號
4.選裝cnpm，屬于npm（從國外下載，所以速度慢）的替代品
中國鏡像站
安裝命令：npm install -g cnpm --registry=https://registry.npmmirror.com

2.安裝Vue-cli腳手架和創建項目

2.1 安裝Vue-cli腳手架
安裝命令（使用cnpm）：cnpm install -g @vue/cli 查看：vue -V
2.2 創建項目
vue create 項目名稱 項目名稱不能為大寫，否則會報錯

當創建完成后，我們就可以看到wms這個項目就在我們根目錄下創建完成了。
創建完成后我們可以運行一下，使用命令：npm run serve/yarn run serve 此時會報錯，因為我們還在根目錄里面，所以使用cd 項目名稱 ‘進入到項目，在使用命令運行。
此時我們的項目模板就創建成功了。

3.Element-ui的引用

Element ui（https://element.eleme.cn/#/zh-CN/component/installation）

安裝全局依賴，npm i element-ui -S 等同于 npm i element-ui --save-dev，我們怎么判斷是否安裝完成呢，有兩個方法：
1.
2.
安裝后需要引入，官方文檔上有現成的代碼可以抄

到這一步就是引入完成了。我不知道你們走到這一步的時候報不報錯，我的是報錯了的。
這個報錯原因，我也不是很清楚，但是我搜了一下解決方法，很多人說eslint 需要一個配置文件.eslintrc.js，但是我是直接套用的模板，所以解決方法如下：
這樣就不報錯了。下期見！

總結

以上是生活随笔為你收集整理的前端Vue框架搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

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