vue怎麼啟動自己的專案

vue以往大家都是習慣用命令列建立新專案，而ui是一個視覺化的圖形介面，對於新手來說更加友好了！不但可以建立、管理、還可以更新vue專案，也可以下載各種需要的外掛，比如elmentui、axios、vuex等，圖形化更加直觀的看到所安裝的各種外掛以及一來，安裝解除安裝不用敲命令，一鍵即可，下面就來介紹，如何使用ui建立新專案！

1、首先確保，已經安裝了nodejs這個軟體，而且安裝了vue cli，因為ui實在vue cli的基礎上封裝而成的

npm就是一個對node。js安裝包管理器、相當於yum這種

運維npm是外國人的伺服器，下載比較慢，可以安裝一下淘寶的npm映象，cnpm

安裝 npm install cnpm ——regisistry=https：//registry。npm。taobao。org

安裝完後可以cnpm -v測試一下，有結果就是安裝成功了

npm install -g vue 安裝全域性vue

npm install -g @vue/cli 安裝vue腳手架 ，加一個@是最新的版本

npm install -g vue/cli 安裝的不是最新版本

至於怎麼安裝nodejs，這個其實很簡單，一般都是安裝在windows的，我大致說一下，就是搜百度nodejs官網，下載對應的windows應用安裝包，安裝完成後，cmd命令列s輸入node -v 有結果就是安裝成功了，大家也可以百度搜索，現在假設你已經安裝好了，vue -V也能輸出結果

2、安裝好後，可以用idea或者vscode開啟終端工具，直接執行vue ui，瀏覽器會自動了跳轉到localhost：8080，然後就可以看到介面了

3、然後，可以選擇建立專案的路徑，可以自定義，然後點選建立，填寫專案名、下一步即可

4、選擇預設、可以選擇預設的vue2、vue3、還有手動設定，這裡我們選擇手動，因為有的功能需要自己加，有的類似於單元測試之類根據需要選擇

5、可以選擇router、vuex、css等常用的功能

6、配置這裡，路由是否選擇history模式，這裡選了的話，url就沒有“#”這個符號

為了美觀可以選上、css預處理，可以按需選擇

7、然後儲存直接建立，也可以儲存預設，下次直接用

建立完成之後，如下圖所示：

8、然後點選外掛這裡，之前選擇的router、vuex等都已經安裝好了，可以直接使用，這種方式真的很方便

然後現在可以下載新的外掛，比如ui元件、elemnetui，以及前後端axios、直接搜尋安裝就虧

9、安裝之後，就會自動引入外掛，然後用編輯器開啟就可以看到了

到這裡，一個UI建立新專案的流程算是完了，專案資料夾也會生成在你指定的地址，下面就用你的編輯器看一下了，裡面的目錄結構

node_module

vue專案載入依賴檔案存放的資料夾

public

存放一些頁面圖示或者其他頁面

package.json

存放專案依賴配置，比如ui元件、路由、vuex

vue.config.js

vue 的配置檔案

yarn.lock

構建依賴關係樹的作用

.gitignore

git 忽略檔案

index。html 首頁入口檔案

README。md 專案說明文件，markdown格式

src

vue 專案原始碼存放的位置。檔案下面有這些：

assets：放一些資原始檔，比如 css，logo圖片等資源。

component：元件資料夾，存放 vue 的公共元件、全域性註冊，可以不用

router：存放 index。js，這個 js 用來專門配置頁面路由

tool：工具類 js，將 js 程式碼封裝好，放在這可以全域性呼叫

views：主體頁面

main。js：專案的入口檔案，初始化 vue 例項，並引入所需要的外掛，核心檔案

app。vue：是專案的主元件，所有頁面都是在該元件下進行切換的，可以全寫這，不適用component目錄

Tags：vue安裝npm外掛可以

上一篇：中科院科學家解碼中國空間站植物生長奧秘

下一篇：LOL手遊搶龍難？這三位英雄的超遠技能，輕鬆偷走大小龍