vue手腳架安裝和專案建立

2022-07-19 19:18:16 字數 2634 閱讀 3018

一 node安裝

1 如果不確定自己是否安裝了node,可以在命令列工具內執行:node -v;

2如果執行結果顯示:xx不是內部命令,說明你還沒有安裝node,node按爪給你位址 : 

注意:安裝node-cli腳手架目前需要node版本 v4.0以上

二  vue-cli 全域性安裝

命令列執行: npm install -g vue-cli    //加-g全域性安裝  不能使用vue create 命令 需要建立專案然後再對專案進行初始化

或者: npm install -g @vue/cli   //可以使用vue create 命令  需要node版本》=8

注意:1 檢視node版本。如果版本低公升級node版本,最快的辦法解除安裝重新安裝

2  如果npm在國內的網路環境下可能會比較慢,解決方案:

使用**映象:

1>.****:

2>.安裝:npm install cnpm -g --registry=  注意:安裝完後最好檢視其版本號cnpm -v或關閉命令提示符重新開啟,安裝完直接使用有可能會出現錯誤;

3>.注:cnpm跟npm用法完全一致,只是在執行命令時將npm改為cnpm(以下操作將以cnpm代替npm)。

4> 如何更新npm的方法:  可以使用npm update -g

來更新版本

三 建立專案

1 如果執行npm install -g vue-cli  

執行命令: vue init webpack demo(你新建的專案名稱/檔名稱)

執行之後將會 自動初始化乙個資料夾 :demo

手動開啟demo資料夾 可以看到 已經初始化好了 乙個基本的專案:

2 如果執行 npm install -g @vue/cli 命令

執行 vue 檢視vue命令

執行vue create [filename]建立專案

四 啟動專案

如上圖所示,執行初始化專案以後,下面會有對應的命令:

繼續執行: cd demo (這是進入到demo資料夾的命令)

然後執行 安裝 :npm install

安裝完成之後再執行命令: npm run dev /yarn serve

整個專案就已經啟動了:

注意:如果開啟瀏覽器以後,沒有啟動成功,檢查一下是不是埠號被占用了,次介面可以在config/index.js下進行修改,建議修改成不常用的乙個埠。

五、專案檔案配置介紹

build 和 config  是關於webpack的配置,裡面包括一些server,和埠;

node_modules: 安裝依賴**庫;

src :  存放原始碼;

static:存放第三方靜態資源的,static裡面的.gitkeep,如果為空,也可以提交到github上面,正常情況下,是不可以提交的。

.babelrc:把es6檔案編譯成es5

.babelrc檔案

.editorconfig:編輯器的配置

.editorconfig

charset = utf-8 //編碼

indent_style = space //縮排風格,基於空格做縮排

indent_size = 2 //縮排大小是2格

end_of_line = lf //換行符的風格

insert_final_newline = true //當你建立乙個檔案,會自動在檔案末尾插入新行

trim_trailing_whitespace = true //自動移除行尾多餘空格

.eslintignore 忽略語法檢查的目錄檔案

就是忽略對build/*.js和 config/*.js

package.json :  

,

"dependencies": ,

"devdependencies": ,

"engines": ,

"browserslist": [

"> 1%",

"last 2 versions",

"not ie <= 8"

]}

centos 安裝nodejs與vue手腳架安裝

回到文章總目錄 關於ajax的解釋 node.js安裝 node.js是乙個運用程式,用於解釋js 目的 通過node.js對計算機資源進行操作 原因 ajax需要乙個服務端,才能執行https 用瀏覽器開啟下面這個 映象 找到你要的版本 比如我要找到的v14.15.0 現在是2020年11月13日...

Vue 環境安裝和建立專案

使用 cdn 方法,遠端鏈結引入,需要連線網路。staticfile cdn 國內 cdnjs npm方法安裝速度較慢,因此不推薦用於日常開發 測試,但在用 vue.js 構建大型應用時推薦使用 npm 安裝。vue.js 提供了乙個官方命令列工具,可用於快速搭建大型單頁應用。vue.js 的推薦開...

vue 安裝並建立vue專案

2,npm包管理器,是整合在node中的,所以安裝了node也就有了npm,直接輸入 npm v 命令,顯示npm的版本資訊。3,安裝vue cli,執行下面的命令 npm install g vue cli cnpm i g vue cli 安裝結束之後,可以使用vue v 檢視 vue 的版本 ...