vue腳手架搭建
阿新 • • 發佈:2017-11-11
發的 osx run -a 默認 開發 xxx size align
步驟:
npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev
Vue.js 目錄結構
上一章節中我們使用了 npm 安裝項目,我們在 IDE(Eclipse、Atom等) 中打開該目錄,結構如下所示:
目錄解析
目錄/文件 | 說明 |
---|---|
build | 最終發布的代碼存放位置。 |
config | 配置目錄,包括端口號等。我們初學可以使用默認的。 |
node_modules | npm 加載的項目依賴模塊 |
src |
這裏是我們要開發的目錄,基本上要做的事情都在這個目錄裏。裏面包含了幾個目錄及文件:
|
static | 靜態資源目錄,如圖片、字體等。 |
test | 初始測試目錄,可刪除 |
.xxxx文件 | 這些是一些配置文件,包括語法配置,git配置等。 |
index.html | 首頁入口文件,你可以添加一些 meta 信息或同統計代碼啥的。 |
package.json | 項目配置文件。 |
README.md | 項目的說明文檔,markdown 格式 |
在前面我們打開 APP.vue 文件,代碼如下(解釋在註釋中):
src/APP.vue
<!-- 展示模板 --> <template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div> </template> <script> // 導入組件 import Hello from ‘./components/Hello‘ export default { name: ‘app‘, components: { Hello } } </script> <!-- 樣式代碼 --> <style> #app { font-family: ‘Avenir‘, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>接下來我們可以嘗試修改下初始化的項目,將 Hello.vue 修改為以下代碼:
src/commponents/Hello.vue
<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: ‘hello‘, data () { return { msg: ‘歡迎來到菜鳥教程!‘ } } } </script>重新打開頁面 http://localhost:8080/,一般修改後會自動刷新,顯示效果如下所示:
vue腳手架搭建