文件目錄結構
readme 項目說明文件
package.json 依賴包文件
package-lick.json鎖文件
LICENSE開源協議說明
index.html 首頁默認模板文件
postcssrc postcss 配置項
gitignore 不上傳git倉庫的文件
eslintrc 代碼規範
eslintignore 不檢測eslintrc裏面文件的代碼規範
edittorconfit 配置編輯器語法
babelrc 通過語法解析器轉換，轉換成瀏覽器可執行的代碼
static 靜態資源
node_modules 依賴包
src 整個項目源代碼
----mian.js 入口文件
-----App.vue 根組件
-----router 路由文件
----components 小組件
----assets 項目圖片資源
config 項目配置文件
----dev.env.js 開發環境配置信息
----index.js基礎配置信息
----prod.env.js 線上環境配置信息
build 項目打包 webpack配置項 基礎開發線上配置項 工具項
以vue結尾的文件是一個單文件組件
app.vue 是整個應用的一個根組件
mian.js入口文件
route.js根據url的不同，給用戶返回不同的內容
<route-view />顯示的是當前路由地址所對的內容
index.js @表示src根目錄
不要縮進
新建文件夾和文件 page -- home -- Home.vue
route/index.js
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Home from '@/pages/Home/home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
Home.vue name單引號 export不要有縮進
<template>
<div>Home</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style>
</style>
npm install fastclick --save 在git終端執行 安裝click移動端300ms的點擊問題
num run start 重啓項目
注意：註釋後面加個空格，否則報錯，/* eslint-disable no-new */要加上，否則報錯
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// fastClick 解決click在移動端點擊延遲300ms的問題
import fastClick from 'fastclick'
// reset.css 解決樣式重置的css
import './assets/styles/reset.css'
// reset.css 解決移動端1px邊框的問題
import './assets/styles/border.css'
/* eslint-disable no-new */
Vue.config.productionTip = false
fastClick.attach(document.body)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
index.js
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Home from '@/pages/Home/home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><!--移動端禁止縮放-->
<title>travel</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</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>
Home.vue
<template>
<div>Hello word</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style>
</style>
