原文地址：vue-cli入門

目錄

9.vue-cli

9.1.介紹和安裝

9.2.快速上手

9.3.項目結構

9.4.單文件組件

9.5.運行

---

9.vue-cli

9.1.介紹和安裝

在開發中，需要打包的東西不止是js、css、html。還有更多的東西要處理，這些插件和加載器如果我們一一去添加就會比較麻煩。幸好，vue官方提供了一個快速搭建vue項目的腳手架：vue-cli。使用它能快速的構建一個web工程模板。

• 官網：https://github.com/vuejs/vue-cli
• 安裝命令：npm install -g vue-cli

9.2.快速上手

我們新建一個module：

切換到該目錄：

用vue-cli命令，快速搭建一個webpack的項目：vue init webpack

前面幾項都走默認或yes

下面這些我們選no

最后，再選yes，使用 npm安裝

開始初始化項目，并安裝依賴，可能需要

安裝成功！

可以使用npm run dev命令啟動。

9.3.項目結構

安裝好的項目結構：

入口文件：main.js

9.4.單文件組件

需要注意的是，我們看到有一類后綴名為.vue的文件，我們稱為單文件組件

每一個.vue文件，就是一個獨立的vue組件。類似于我們剛才寫的login.js和register.js

只不過，我們在js中編寫 html模板和樣式非常的不友好，而且沒有語法提示和高亮。

而單文件組件中包含三部分內容：

• template：模板，支持html語法高亮和提示
• script：js腳本，這里編寫的就是vue的組件對象，還可以有data(){}等
• style：樣式，支持CSS語法高亮和提示

每個組件都有自己獨立的html、JS、CSS，互不干擾，真正做到可獨立復用。

9.5.運行

看看生成的package.json：

• 可以看到這引入了非常多的依賴，絕大多數都是開發期依賴，比如大量的加載器。
• 運行時依賴只有vue和vue-router
• 腳本有三個：
  • dev：使用了webpack-dev-server命令，開發時熱部署使用
  • start：使用了npm run dev命令，與上面的dev效果完全一樣，當腳本名為“start”時，可以省略“run”。
  • build：等同于webpack的打包功能，會打包到dist目錄下。

我們執行npm run dev?或者?npm start?都可以啟動項目：

頁面：

?

總結

以上是生活随笔為你收集整理的Vue—相关工具—vue-cli的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。