vue當(dāng)然可以使用script標(biāo)簽引入，不需任何依賴即可按照vue的語法進(jìn)行使用。但中大型商用項(xiàng)目中，還是建議使用工程化方式使用vue，vue提供了官方腳手架vue-cli，可以快速構(gòu)建vue項(xiàng)目，腳手架會幫助開發(fā)者創(chuàng)建好建議的工程目錄、引入相關(guān)依賴，利用nodejs環(huán)境為vue項(xiàng)目的開發(fā)提供最大化的便利。vue-cli傾向于快速構(gòu)建SPA工程，實(shí)際上vue也不一定做成SPA，具體場景具體分析吧。

---

全局安裝vue-cli腳手架：
npm i vue-cli -g
安裝完成后可使用vue命令來構(gòu)建vue工程。

vue常用的命令有兩個：list 和 init,list將列出官方提供的vue工程模板，init將初始化一個vue工程。

在實(shí)際項(xiàng)目中使用的模板為webpack或webpack-simple,中小型項(xiàng)目可使用webpack-simple，此模板為vue初始化一個最簡潔的webpack工程，中大型項(xiàng)目可使用webpack，此模板將為vue初始化一個完整的webpack工程。

創(chuàng)建一個webpack模板vue工程：
vue init webpack 工程名
創(chuàng)建過程中將詢問工程名、作者、是否使用eslink、單元測試框架等信息，根據(jù)需要填y或n。

創(chuàng)建完成后，cd進(jìn)入工程根目錄，npm i安裝package.json中的依賴。
依賴完成后，使用
npm run dev
將自動打開瀏覽器在8080端口上訪問vue工程，實(shí)際是利用node環(huán)境創(chuàng)建一個express框架支撐開發(fā)環(huán)境。

創(chuàng)建好的webpack模板vue工程目錄：

目錄說明：

├── build 構(gòu)建腳本目錄 │ ├── build-server.js 運(yùn)行本地構(gòu)建服務(wù)器，可以訪問構(gòu)建后的頁面 │ ├── build.js 生產(chǎn)環(huán)境構(gòu)建腳本 │ ├── dev-client.js 開發(fā)服務(wù)器熱重載腳本，主要用來實(shí)現(xiàn)開發(fā)階段的頁面自動刷新 │ ├── dev-server.js 運(yùn)行本地開發(fā)服務(wù)器 │ ├── utils.js 構(gòu)建相關(guān)工具方法 │ ├── webpack.base.conf.js wabpack基礎(chǔ)配置 │ ├── webpack.dev.conf.js wabpack開發(fā)環(huán)境配置 │ └── webpack.prod.conf.js wabpack生產(chǎn)環(huán)境配置 ├── config 項(xiàng)目配置 │ ├── dev.env.js 開發(fā)環(huán)境變量 │ ├── index.js 項(xiàng)目配置文件 │ ├── prod.env.js 生產(chǎn)環(huán)境變量 │ └── test.env.js 測試 環(huán)境變量 ├── src 源碼目錄 │ ├── main.js 入口js文件 │ ├── app.vue 根組件 │ ├── components 公共組件目錄 │ │ └── title.vue │ ├── assets 資源目錄，這里的資源會被wabpack構(gòu)建 │ │ └── images │ │ └── logo.png │ ├── routes 前端路由 │ │ └── index.js │ ├── store 應(yīng)用級數(shù)據(jù)（state） │ │ └── index.js │ └── views 頁面目錄 │ ├── hello.vue │ └── notfound.vue ├── static 純靜態(tài)資源，不會被wabpack構(gòu)建。 └── test 測試文件目錄（unit&e2e）└── unit 單元測試└── e2e e2e測試框架 ├── index.html 入口頁面，SPA入口html ├── .babelrc ES6配置 ├── .editorconfig webstorm編輯器配置 ├── .eslintignore eslink語法檢測忽略 ├── .eslintrc.js eslink配置 ├── .postcssrc.js css轉(zhuǎn)換配置 ├── .gitignore git忽略提交 ├── .package.json npm依賴配置 ├── README.md 項(xiàng)目說明

總結(jié)

以上是生活随笔為你收集整理的vue2工程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。