vue入門（一）安裝及建立第乙個專案

2021-08-29 20:38:05 字數 845 閱讀 4756

前端近幾年來飛速發展，各種技術框架層出不窮，架構模式也從主流mvc慢慢轉向mvvm。使用angularjs、react和vue.js等框架進行前端開發已經成為趨勢。因此我也開始了vue.js的修煉之路（之所以選擇vue.js是因其入門門檻低）。

為了讓我們建立vue專案更加容易，我們使用vue.js的腳手架工具vue-cli。這裡採用npm進行安裝

1.首先安裝node.js，現行版本的node.js自帶npm。

npm install cnpm -g --registry=
2.安裝vue-cli

cnpm install --global vue-cli
1.開啟命令列輸入以下命令，採用webpack進行專案構建，建立過程會要求你的專案起名之類，基本直接回車確認就可以

vue init webpack demo
2.建立完成後，專案預設在你c盤使用者資料夾下，輸入以下命令進入到專案根目錄下

cd c:\users\gzc\demo
npm install
npm install ：安裝所有的模組，如果是安裝具體的哪個個模組，在install 後面輸入模組的名字即可。而只輸入install就會按照專案的根目錄下的package.json檔案中依賴的模組安裝

4.輸入以下命令執行程式

npm run dev
開啟瀏覽器輸入http://localhost:8080/，如果能彈出頁面，說明專案已經建立完成

建立第乙個Vue專案

1.開發工具的安裝 visual studio code,安裝對應的外掛程式,除錯用chrome瀏覽器,瀏覽器上安裝vue除錯的外掛程式,3.學習 菜鳥教程,w3school,vue官網.建立乙個vue專案步驟 一種純命令列的方式建立,另一種是ui介面的方式建立vue專案 菜鳥教程有純命令列的方式建...

建立第乙個vue專案

1，配置node環境 2，開啟cmd切換到node安裝目錄，安裝vue cli vue cli會自動按照專案結構在你本地初始化乙個專案，當然不用該工具，手動建資料夾配置js等也可以的，但是vue cli 一行命令就自動生成了多方便呢 npm install vue cli g3，切換到工作目錄，在該...

建立第乙個vue工程

第一步npm安裝 圖1雙擊安裝，在安裝介面一直next 圖2 圖3 圖4直到finish完成安裝。開啟控制命令列程式 cmd 檢查是否正常 圖5使用 npm映象 npm install g cnpm registry 這樣就可以使用cnpm 命令來安裝模組了 1.第一步 安裝vue cli cnpm...