命令列生成vue專案框架

2021-07-30 09:52:23 字數 2120 閱讀 3675

用命令列生成vue專案框架需要npm包管理器來安裝,而npm又是在安裝nodejs的時候同時安裝的,

所以首先要安裝nodejs,學習vue有必要了解下nodejs和npm的基本知識:

nodejs安裝: 

npm 介紹: 

npm install -g vue-cli

-g表示全域性安裝, vue-cli是模組,全域性安裝的模組可以在命令列直接使用

紅框裡是安裝命令,由於npm**在國內速度非常慢,所以在命令後面加上**的映象,

很快就安裝好了.也可以使用cnpm安裝.

安裝後在命令列輸入 vue -version 能看到版本號表示全域性安裝成功,下面就可以使用命令列建立專案了.

建立乙個基於"webpack"的專案,後面是專案名

----注:vue-cli 的模板包括 webpack 和 webpack-******,前者是比較複雜專業的專案,他的配置並不全放在根目錄下的 webpack.config.js 中。

----webpack-****** 相對簡單的,它根目錄下才有個 webpack.config.js。

注意:專案建立過程中,有如下選擇,選擇no。(該選項為使用eslint規範你的**,乙個空格錯誤都將報錯,不開啟,可以避免不必要的麻煩)

----eslint規範建議開啟,加強**規範

按照提示輸入,專案名,專案描述,專案作者

等等,看到最後這句專案就建立好了,

專案結構:這是沒安裝依賴時的專案結構

剛我們命令列輸入的東西就在package.json這個檔案裡,開啟檔案

專案名字,版本,描述,作者等,後面還有執行專案命令,專案依賴,開發環境專案依賴等.

生成了專案以後是不能直接執行的,現在很多專案都依賴許許多多的模組,需要逐一安裝,

ctrl+c 停掉剛生成專案的命令,cd vue-project 進入專案跟目錄, 用命令npm install 安裝

同樣是使用**映象.

當這個命令執行完成以後會多出乙個node_modules資料夾,裡面就是專案所需的所有依賴

可以看到有很多模組,這些模組都是在package.json檔案裡定義好了的.

dependencies是專案依賴,

devdependencies是開發時專案依賴.

好了,依賴安裝完成後就可以執行我們的專案了命令:

看到這樣的輸出,專案就執行起來了,然後開啟瀏覽器,輸入第二個紅框的位址 localhost:8080,

瀏覽器截圖:

專案就執行起來了.命令列生成的vue專案,還支援熱啟動,當專案檔案有改動的時候,頁面會自動變化,

標籤裡的js**修改後,還得手動重新整理頁面,不過已經非常棒了.

意外金喜的部落格 : 

命令列生成vue專案框架

用命令列生成vue專案框架需要npm包管理器來安裝,而npm又是在安裝nodejs的時候同時安裝的,所以首先要安裝nodejs,學習vue有必要了解下nodejs和npm的基本知識 nodejs安裝 npm 介紹 npm install g vue cli g表示全域性安裝,vue cli是模組,全...

vue命令列生成專案

vue.js 提供乙個官方的命令列介面工具,用於快速搭建大型單頁面應用程式。能夠為現代前端開發的工作流程,帶來持久強力的基礎架構。只需幾分鐘,就可以建立並執行乙個帶有 熱過載 儲存時 檢查以及可直接用於生產環境的構建配置 的專案 安裝 vue cli npm install global vue c...

cocos命令列生成專案

cocos命令列生成專案 cocos new goodday 專案名稱 p com.boleban.www 包名字 l cpp 專案型別 d d devproject cocos2dx workspace 專案存放路徑 把生成的dll和exe檔案拷到resources資料夾中,設定方法 在自己的專案...