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进行接口配置导入数据都是在这个文件里面配置。

[图片上传失败...(image-45b302-1517810085376)]

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后么么哒)
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容