vue-cli脚手架项目构成

这篇文章针对于已经会用脚手架搭建vue的同学，如果不会从vue脚手架搭建，可以先稍微了解下Node和es6，这样对你学习vue很有帮助。

初学vue，当脚手架刷刷刷的一次性拉下来那么多JS，和.vue的文件时，应该或多或少都有点蒙蔽，vue官网的介绍和node上面的提示都有点作用，我想每个人都走过那些坑吧，因为vue对于代码格式要求很高，所以写的时候慎重慎重。下面放一张图这张图也是从网上盗来的祖传图--!

原谅我画了特别丑的红线！因为这两个文件在目前的vue脚手架中已经删除（让我吃过大亏）！

build[webpack配置]

build文件主要是webpack的配置，主要启动文件是webpack.dev.conf.js，当我们输入npm run dev首先启动的就是webpack.dev.conf.js，它会去检查node及npm版本，加载配置文件，启动服务。这些内容我们可以在package.json里面看到。以及我们导入node用node进行接口配置导入数据都是在这个文件里面配置。

config——[vue项目配置]

重点提一下Index.js这里面配置端口号和首页信息，里面是一点基础的Node知识在这里就不多说。

node_modules——[依赖包]

npm install ,npm安装包，可以直接安装你想用的插件比如jquery很方便。重点提一点，如果你想安装全局的在package.json中找到你所引入的插件以及他的版本，安装的时候加入--save,比如：npm install jquery --save。

写完发现祖传的图上面没有node_modules这个文件夹见谅见谅。

src——[项目核心文件]

1.App.vue——[根组件]

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)。

1. template类似于一个大的div嵌套内容，初始化的app.vue里面会嵌套一个router,相当于里面的跳转页面
2. script是用es6写的，里面一些基础的vue知识我想既然都要用到脚手架就说明本地的vue.js文件或多或少会知道。这个仁者见仁智者见智。
3. style，样式，就不多说了。这里你会看到import这种引入样式表的方式。

2.main.js-[入口文件]

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例。顺口说一句

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import MuseUI from 'muse-ui'  //引入muse-ui的框架
    import 'muse-ui/dist/muse-ui.css'
    import axios from 'axios'  // 引入axios的框架异步方法
    import store from './vuex/store' //这就是vuex，vue的项目管理工具，能不用就不用的东西。
    Vue.use(MuseUI);
    
    Vue.config.productionTip = false
    
    //vue原型中加入axios
    Vue.prototype.$http = axio  //这句话忽略不计我自己项目中的.

    new Vue({
      el: '#app',
      router,
      store,
      components: { App }, // components组建信息引入App.vue文件
      template: '<App/>',
      beforeCreate(){
        this.$store.dispatch('getData',this); // 生命周期里面的，可以不看这是项目中的
      }
    })

3.router/index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router) //配置vue使用路由
    
    import friend from '../components/friends/friend' // 将friend这个组建引入
    let routes = [
      { path: '/friends', name: 'friend', component: friend }, //跳转信息
    ]
    
    export default new Router({
      routes
    })

static

语义化，静态文件的意思，可以放json或者imgs或者css文件

package.json项目基本信息，打包工具基本可以在里面阅读到你可以看到的文件和配置记忆版本号

文笔很糟糕，能看到这的都是大神。如果有缘人看到里面有错误可以交流交流，共同进步。

          ----------天雨大不润无根之草，佛法宽只度有缘之人(佛系90后么么哒)

更多专业前端知识，请上 【猿2048】www.mk2048.com