參考資料:
Vue2.0 新手完全填坑攻略—從環(huán)境搭建到發(fā)布
vue-cli構(gòu)建vue項(xiàng)目
Webpack 入門教程
Vue中文官網(wǎng)
Vue英文官網(wǎng)
1.Node.js安裝
https://nodejs.org/en/download/
2.安裝vue-cli(搭建vue環(huán)境)
npm install -g vue-cli
3.使用vue-cli初始化項(xiàng)目 創(chuàng)建一個基于 webpack 模板的新項(xiàng)目
vue init webpack-simple my-project-name
vue init webpack my-project-name(安裝路由等等)
通過idea打開項(xiàng)目目錄
目錄解析
| 目錄/文件 | 說明 |
|---|---|
| build | 最終發(fā)布的代碼存放位置。 |
| config | 配置目錄，包括端口號等。我們初學(xué)可以使用默認(rèn)的。 |
| dist | 打包后發(fā)布時(shí)文件目錄 |
| node_modules npm | 加載的項(xiàng)目依賴模塊 |
| src | 這里是我們要開發(fā)的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件 |
| assets: 放置一些圖片，如logo等。 | |
| components: 目錄里面放了一個組件文件，可以不用。 | |
| App.vue: 項(xiàng)目入口文件，我們也可以直接將組建寫這里，而不使用 components 目錄。 | |
| main.js: 項(xiàng)目的核心文件。 | |
| static | 靜態(tài)資源目錄，如圖片、字體等。 |
| test | 初始測試目錄，可刪除 |
| .xxxx文件 | 這些是一些配置文件，包括語法配置，git配置等。 |
| index.html | 首頁入口文件，你可以添加一些 meta 信息或同統(tǒng)計(jì)代碼啥的。 |
| package.json | 項(xiàng)目配置文件。 |
| README.md | 項(xiàng)目的說明文檔，markdown 格式 |
補(bǔ)充一點(diǎn)：|上述操作如若不行，需要配置webpack
一小時(shí)包教會 —— webpack 入門指南
Webpack安裝文檔
npm install webpack -g
4、進(jìn)到目錄
cd my -project
5、安裝依賴(模塊)
npm install
6、開始運(yùn)行(此后在項(xiàng)目中修改時(shí)實(shí)時(shí)變化)
npm run dev
7、測試項(xiàng)目--訪問
localhost:8080
Paste_Image.png
8、打包發(fā)布
npm run build
完成后項(xiàng)目目錄下
dist目錄文件
