vue腳手架學習和建立vue基礎專案

2022-06-17 16:48:09 字數 1626 閱讀 7508

一、1、vue腳手架的使用

在cmd命令視窗中可以通過npm install -g @vue/cli 來建立vue腳手架,注意,有時需要使用管理員許可權啟動安裝

2、建立vue基礎專案架構

1> 基於互動式命令列的方式,vue create 專案名稱 來建立vue基本專案架構

2>基於圖形化介面的方式

vue ui

3>基於2.x的舊模板,建立舊版vue專案

npm install -g @vue/cli-init

vue init webpack my-project

在這裡我們使用第一種方式建立vue基礎專案架構

①在命令列中輸入vue create vueest

②選擇預設功能還是手動安裝功能,這裡選擇手動安裝,通過↑↓鍵來選擇,選擇好了之後按回車

③選擇需要安裝的功能,按↑↓鍵來選擇,選擇好以後按空格鍵選中,最後選好了按回車

④提示你選擇安裝歷史模式還是hash模式的,這裡選擇hash模式,選n,回車

⑤選擇eslink的語法規則,選擇標準模式,回車

⑥選擇什麼時候進行eslink語法校驗,這裡選擇預設方式,第乙個,回車

⑦這些檔案babel, eslint, etc.如何配置,是單獨存放到config中還是配置到package.json中,這裡選擇單獨存放到config中

⑧提示以上所做的配置是否儲存為模板,供後續建立專案時使用,這裡選擇n,回車

⑨如果電腦安裝了npm和yarn兩個包管理器,隨便選擇乙個,然後開始安裝

這樣就建立完畢了

二、配置專案啟動埠

1、在package.json中進行配置,也可以新建乙個vue.config.js檔案進行配置

配置之後,通過

npm run serve 啟動專案,會自動開啟專案並使用配置的埠進行展示

Vue 腳手架學習記錄

就可以像vs code開發vue專案了。出現的第一錯誤 vue warn the data option should be a function that returns a per instance value in component definitions.出現錯誤的原因 div templ...

vue 安裝和腳手架建立專案

1.安裝nodejs,開啟安裝目錄 d program files nodejs 這是我安裝目錄,自行更改 在該目錄開啟cmd,執行如下命令檢測是否安裝成功。npm v由於國內訪問外網有問題,使用cnpm 替換 npm 有需要可以先配置下npm 全域性安裝目錄 npm config set pref...

搭建Vue腳手架

從vue官網安利了一波安裝腳手架的主要 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模板的新專案 vue init webpack my project 安裝依賴,走你 cd my project npm install npm r...