vue-cli项目介绍

项目介绍

package.json //项目配置文件

在这个配置文件里面，有两个编写好的指令是用于开启开发环境和生产环境

"scripts": {
"serve": "vue-cli-service serve", //开发环境
"build": "vue-cli-service build" //生产环境
}

开启开发环境

npm run serve

src文件夹：程序员开发的源代码，该文件夹下

assets 文件夹用于存放资源，比如图片，css，字体

components 组件目录，后期的小组件都方这个目录

views 这个是存放试图模板

router 文件夹，路由管理对象的文件夹

store vuex的文件夹

App.vue 整个项目的根组件，整个项目的显示从这里开始

main.js 整个项目的入口文件，也是webpack的打包入口

main.js解释

import Vue from 'vue'
//导入vue.js文件
import App from './App.vue'
//导入一个叫App.vue的组件
import router from './router'
//导入路由插件
import store from './store'
//导入vuex
Vue.config.productionTip = false
//在webpack的生产模式下面，取消所有的vue提示
//相当于在生产模式下，取消所有的console.log提示
new Vue({
router,
store,
//把当前的app.vue这个组件渲染到#app的托管区域
render: h => h(App)
}).$mount('#app')

在上面的代码里面，有一点注意，就是 render: h => h(App) 它代表的意思就是把app.vue的组件渲 染到#app的托管区域

App.vue解释

<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>

这里面主要就三个标签我们需要看 template 用于写html script 用于写js style 用于写样式 lang="scss" 用于写scss

关于vue脚手架的运行逻辑

启动webpack开启运行环境 ------------> 执行 main.js 入口js文件 ------------> 渲染App.vue