天天看點

Vue基礎第一篇 - 搭建項目

首先來搭建項目吧。(node環境就不用說了 肯定要的)

使用vue-cli、webpack來搭建項目

全局安裝webpack、vue-cli。如果要跟着這篇學習  請更新一下webpack、vue-cli。越新越好用嘛。哈哈

npm install webpack -g

npm install -g vue-cli

vue init webpack your-vue        //開始搭建項目

Vue基礎第一篇 - 搭建項目

如果你不小心開啟了ESlint。可以去build檔案夾下的webpack.base.conf.js檔案裡面删除下面紅框裡代碼,然後重新啟動服務。

Vue基礎第一篇 - 搭建項目

新版的vue-cli好像是直接就下載下傳了node_modules

cd your-vue

npm install //如果沒有下載下傳node_modules。這是一個漫長的過程

npm run dev

浏覽器打開localhost:8080

ok 當你看到vue的巨大logo 就表示 項目搭建好了。

我這樣來管理項目檔案,請看下圖

Vue基礎第一篇 - 搭建項目

博友們。這一篇就到這裡吧。PS:老闆叫我去改bug了。

接下來我會把vue項目實戰、優化的經驗跟大家繼續分享。

github位址:https://github.com/beitafive/study-vue