Vue-cli2.0 第3节 解读Vue-cli模板
目录
第3节 解读Vue-cli模板
了解一下Vue-cli的模板操作，包括增加模板、修改模板，以及一个常规模板的基本结构。
1. npm run build命令
npm run build命令就是把写好的Vue网页放到服务器上，在命令行输入这条指令后，vue-cli会自动进行项目发布打包。在package.json文件的scripts字段中可以看出，执行的npm run build命令就相对执行的node build/build.js。
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
在执行完npm run build命令后，在你的项目根目录生成dist文件夹（这个文件夹里面就是我们要传到服务器上的文件。）
dist文件夹下目录包括：
index.html主页文件：因为我们开发的是单页web应用，所以说一般只有一个html文件。- static 静态资源文件夹：里面js、CSS和一些图片
2. main.js文件解读
main.js是整个项目的入口文件，在src文件夹下：
// 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'
Vue.config.productionTip = false //生产环境提示，这里设置成了false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
通过代码看出这里引进了APP的组件和模板，它是通过import App from'./App'这句代码引入的。我们找到App.vue文件，打开查看：
App.vue文件：
<template>
<div id="app">
<img src="./assets/logo.png">
<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>
app.vue文件分成三部分解读:
<template></template>标签包裹的内容：这是模板的HTMLDom结构，里边引入了一张图片和<router-view></router-view>标签，<router-view>标签说明使用了路由机制；<script></script>标签包括的js内容：可以在这里放一些页面的动态效果和Vue的逻辑代码；<style></style>标签包裹的css内容：放写的CSS样式，对页面样子进行装饰用的，需要特别说明的是可以用<style scoped></style>来声明这些css样式只在本模板中起作用。
3. router/index.js 路由文件
在app.vue中我们看到了路由文件，router内容比较多，先简单看一下
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
我们可以看到 import Hello from ‘@/components/Hello’这句话， 文件引入了/components/Hello.vue文件。这个文件里就配置了一个路由，就是当我们访问网站时给我们显示HelloWorld.vue的内容。
4. HelloWorld.vue文件解读
这个文件就是我们在第一节初始化之后看到的页面文件。也分为<template><script><style>三个部分，以后大部分都是写.vue结尾的文件。我们可以试着改一些内容，然后预览一下
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to My Blog,I am Daisy'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>