vue基礎17(vue-cli腳手架安裝和webpack-simple模板項目生成)


vue-cli腳手架安裝和webpack-simple模板項目生成

  ue-cli 是一個官方發布 vue.js 項目腳手架,使用 vue-cli 可以快速創建 vue 項目。

  GitHub地址是:https://github.com/vuejs/vue-cli

一、安裝Nodejs

首先需要安裝Node環境。安裝完成之后,可以在命令行工具中輸入node -vnpm -v,如果能顯示出版本號,就說明安裝成功。

二、安裝vue-cli

  安裝好node之后,我們就可以直接全局安裝vue-cli:

npm安裝方法
npm install -g vue-cli
 
國內淘寶鏡像cnpm安裝方法
 cnpm install -g vue-cli

  如果安裝失敗,可以使用 npm cache clean 清理緩存,然后再重新安裝。后面的安裝過程中,如有安裝失敗的情況,也需要先清理緩存

  安裝完成后,可以使用vue -V(大寫的V)查看vue的版本。

 

如果接下來你不知道要干嘛,那么你可以在命令行中輸入

vue -help

它會有以下提示:

懂點英語的意思應該能看到提示的信息,聰明的你此時接下來執行vue list看看有哪些可用的官網模板:

vue list

Vue.js官方提供了兩種類型的模板項目:

  • 基於vue cli和browserify的項目模板
  • 基於vue cli和webpack的項目模板

vue cli是Vue.js官方提供的命令行創建Vue.js項目腳手架的工具。這兩種類型的項目模板分別提供了簡單模式和完全模式,簡單模式僅包含基於vue.js開發必要的一些資源和包,使用該模式可以快速地投入到開發。完全模式則還包括ESLink、單元測試等功能。

我們在這里使用webpack的項目模板。沒有為什么,因為webpack有點叼叼的。

我們今天玩一下webpac-simple 基於webpack的簡單模板。

使用webpack-simple簡易模板創建項目方法

1、首先切到需要創建項目的目錄下

cd: 進入到指定的文件夾內
mkdir: 創建文件夾

2、使用vue指令初始一個webpack-simple模板的項目

vue init webpack-simple myproject  
(webpack-simple:選用的模板)    
(myproject:意思為生名一個項目目錄名(可隨意取名如果不寫默認上層文件夾名作為項目目錄名))

3、填寫信息

詳細截圖


4、進入到項目目錄下

cd 項目目錄名     (cd myproject)

5、下載當前項目所依賴的包

npm install  (時間會比較久淡定等等)

6、啟動項目

npm run dev   (建議修改默認瀏覽器為google)

接下來見證奇跡的時刻來了,我們第一個vue的項目。只要出現如下界面,證明項目啟動成功了。

 

 webstrom啟動vue框架項目方法

File----》New----》project----》Vue.js---》

git配置博客鏈接

https://www.cnblogs.com/L5251/articles/8952250.html

命令行運行以下命令

 

下載當前項目依賴的包

npm install


命令行啟動程序
npm run dev   (建議修改默認瀏覽器為google)

 


免責聲明!

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



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