vue如何新建一個項目


vue創建項目(npm安裝→初始化項目)

第一步npm安裝

首先:先從nodejs.org中下載nodejs

image

    雙擊安裝,在安裝界面一直Next 等待node.js安裝完成,在DOS命令窗口下對node進行一些配置之后就可以開始安裝vue了

在DOS命令窗口全局安裝vue-cli3.0腳手架工具    啟動GUI創建項目向導

注意:使用安裝和啟動命令最好用命令提示符(cmd)窗口

1 npm install -g @vue/cli
2 vue ui

# OR

yarn global add @vue/cli

image

使用localhost:8000 在瀏覽器進入可視化管理頁面(vue ui 啟動之后會自動進入瀏覽器打開vue項目管理頁面)

注意:所有的操作都是在DOS命令窗口執行vue ui命令才能拿正常操作否則vue項目管理頁面上會提示連接中斷的錯誤

插件安裝

image

左邊的導航欄選擇插件圖標,進入插件頁面,所展示的是現在已經安裝的插件

image

點擊右上角的添加插件 進入所有插件頁面

image

在搜索欄中輸入自己所要安裝的插件(以element為例)

image

顯示為element插件時,安裝時點擊后面的加號

image

在整個頁面下面看到"提示安裝XXXXX"的按鈕,點擊即可安裝插件

image

正在安裝插件ing...

image

配置一些插件的選項等設置,進行調用

image

點擊完成安裝,調用之后才算插件正式安裝成功

image

image

當右下角有彈出提示窗口,表示插件安裝完畢

 

創建項目

image

vue項目管理器會展示已經創建好的項目,新建項目時點擊創建

image

創建新項目,設置項目名稱和包管理器或者添加git管理地址

image

創建項目的預設可以使用以前項目的預設也可以重新定義

image

預設好之后點擊創建項目 進行項目的創建

image

項目創建成功后會在vue項目管理頁面看到我們所創造的項目

image

項目啟動: 直接點擊創建好的項目名進入到項目管理頁面,點擊左側導航欄第四個按鈕 任務按鈕 ,點擊 運行按鈕 啟動項目 在輸出里看到運行狀態和編譯結果

image

直接點擊在編輯器中打開即可對項目進行代碼編寫(以vscode為例,)image

      點開readme.md文件可以看到相關信息及啟動項目方式,在終端,

     新終端用"npm run server"命令啟動項目

 

image
     在啟動項目時可能會報錯,錯誤原因是main.js中導入的包的格式不同,

    把格式改相同即可啟動程序

 

image

image

項目啟動頁面顯示

image

補充:

如果安裝element-ui插件啟動報錯:

image

這個是因為node-sass沒安裝好,所以要重新安裝
國內只能用淘寶的鏡像
windows下運行命令:

1 npm install node-sass --registry=https://registry.npm.taobao.org

 

歸類: vue學習


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM