vue創建項目(npm安裝→初始化項目)
第一步npm安裝
首先:先從nodejs.org中下載nodejs
雙擊安裝,在安裝界面一直Next 等待node.js安裝完成,在DOS命令窗口下對node進行一些配置之后就可以開始安裝vue了
在DOS命令窗口全局安裝vue-cli3.0腳手架工具 啟動GUI創建項目向導
注意:使用安裝和啟動命令最好用命令提示符(cmd)窗口
# OR
3 yarn global add @vue/cli
使用localhost:8000 在瀏覽器進入可視化管理頁面(vue ui 啟動之后會自動進入瀏覽器打開vue項目管理頁面)
注意:所有的操作都是在DOS命令窗口執行vue ui命令才能拿正常操作否則vue項目管理頁面上會提示連接中斷的錯誤
插件安裝
左邊的導航欄選擇插件圖標,進入插件頁面,所展示的是現在已經安裝的插件
點擊右上角的添加插件 進入所有插件頁面
在搜索欄中輸入自己所要安裝的插件(以element為例)
顯示為element插件時,安裝時點擊后面的加號
在整個頁面下面看到"提示安裝XXXXX"的按鈕,點擊即可安裝插件
正在安裝插件ing...
配置一些插件的選項等設置,進行調用
點擊完成安裝,調用之后才算插件正式安裝成功
當右下角有彈出提示窗口,表示插件安裝完畢
vue項目管理器會展示已經創建好的項目,新建項目時點擊創建
創建新項目,設置項目名稱和包管理器或者添加git管理地址
創建項目的預設可以使用以前項目的預設也可以重新定義
預設好之后點擊創建項目 進行項目的創建
項目創建成功后會在vue項目管理頁面看到我們所創造的項目
項目啟動: 直接點擊創建好的項目名進入到項目管理頁面,點擊左側導航欄第四個按鈕 任務按鈕 ,點擊 運行按鈕 啟動項目 在輸出里看到運行狀態和編譯結果
直接點擊在編輯器中打開即可對項目進行代碼編寫(以vscode為例,)
點開readme.md文件可以看到相關信息及啟動項目方式,在終端,
新終端用"npm run server"命令啟動項目
在啟動項目時可能會報錯,錯誤原因是main.js中導入的包的格式不同,
把格式改相同即可啟動程序
項目啟動頁面顯示
補充:
如果安裝element-ui插件啟動報錯:
這個是因為node-sass沒安裝好,所以要重新安裝
國內只能用淘寶的鏡像
windows下運行命令:
歸類: vue學習