vue那点事儿

1 vue-cli  vue脚手架

脚手架做什么的？1生成目录结构 2 完成本地开发调试 3 在编写完代码后对代码进行压缩和部署 4 利用热加载特性来提高编程效率 5使用它的单元测试来测试代码功能

如果用？

首先 要确保 计算机安装了 node  npm vue

然后 安装vue-cli

          npm install -g vue-cli (全局安装vue-cli)

安装成功后 使用脚手架初始化项目

           vue  init webpack projectname(项目名称)

然后根据提示一步一步设置即可

创建成功后 控制台会提示 cd projectname (进入项目目录)

                                              npm install          （安装相关插件）

                                              npm run dev         （启动项目）

这样一个简单的vue项目就搭建成功了 O(∩_∩)O~

<------------------------我是分割线-------------------->

在webstorm上 如何启动项目？

首先找到package.json文件 右键选择 show npm scripts 就会在左下方出现package.json里的scripts中定义的命令，双击 就可以运行了

<--------------------------我是分割线----------------->

文件介绍 main.js

main.js这是项目的入口文件

import Vue from 'vue'
import App from './App'
import router from './router

因为用到了vue所以要引入vue    import Vue from 'vue'

还要引入App.vue  这里使用的是相对路径 相对main.js  import App from './App' 因为webpack.base.conf.js里配置了不用使用后缀名

所以不用写后缀名

因为使用了路由所以要引入路由的配置文件  import router from './router' 这里引入的是router/index.js

如果要引入某个目录下的index.js 可以简写到目录即可

Vue.config.productionTip = false

这句话是用来关闭生产环境提示的

new Vue({})来用启动应用

el:挂载点

router：路由 router:router可以简写成router   这是es6语法

template:<App/>模板  在使用App之前要用components将App注册进来

components:{App}

所以最后就是如下：

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

<-------------------------------------------分割线------------------------------------------>

关于app.vue文件：都做了什么呢？

总共分为三部分

模板部分 逻辑部分 样式部分

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></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>

<-------------------------------------------分割线------------------------------------------>

webpack配置

webpack是当下最流行的一款构建工具

功能：将各种文件打包编译成js  css  jpg png

<-------------------------------------------分割线------------------------------------------>

vue-router 管理视图

作用：使组件与url一一对应 当url hash值变化时 更换组件 单页面应用 方便管理

步骤：

1安装（vue-cli已经默认安装）

npm install vue-router

2 引入

  import Router from 'vue-router'

3 作为插件使用

    Vue.use(Router)

  4创建实例 var router=new Router({

       routes:[

      ]

  })

5注入

  new Vue({

    el:"#app",

   router,

   template:'<App />',

   components:{App}

})

未完 待续