Vue进阶(七)-Vue脚手架之Vue-cli

Vue-cli

1.什么是 Vue-Cli

Vue-cli 是官方提供的一个脚手架！==可以利用它快速生成前端化的工程模板！

功能：

• 统一的目录！
• 快速调试！
• 单元测试！
• 在线运行
• …

2.Vue-Cli安装

#-g means install globally
npm install vue-cli -g 
#select installed applications of vue
vue list 

3.首个vue-cli程序

1.vue项目初始化

# myvue is the name of project
vue init webpack myvue

初始化项目前可以按照需求选择安装vue-router,ESlint,unit tests,样例选择的N；实际可以按照自己需求选择

2.完善依赖，运行程序

ps：下载的所有前端工程一般都没有依赖！

cd myvue  # enter target catelog

npm install  # install all the dependencies

npm run dev # start the project

用浏览器访问，可以看到vue的初始化项目页面效果

4.Vue-cli 目录结构分析

• build 和 config ： webpack 配置文件，项目配置文件
• node_modules：这个一般在开源项目中都不存在，我们拿到项目的第一步就是 安装所有依赖 （npm install）
• src： 项目的源码目录！ （Vue项目 和 js 代码）
• static： 静态资源文件！
• .babelrc： Babel配置文件 （ES6语法转换为 ES5语法！）
• .editorconfig： 编辑器配置
• .gitignore： git文件忽略配置
• .postcssrc.js： css 相关的配置文件，就是导入了css的插件
• index.html： 首页，所有的页面都是通过这里跳转的，实际开发是不使用这个文件的！
• package.json： 项目的配置文件（名称、版本、描述、作者、依赖、启动脚本 …）

1.main.js详解

// es6语法，导入组件和依赖！
import Vue from 'vue'    // vue 依赖
import App from './App'  // 导入组件

Vue.config.productionTip = false  // 关闭浏览器控制台关于环境的提示！

/* eslint-disable no-new */
// vue的核心对象
new Vue({
  el: '#app',  // 节点
  components: { App },  // 组件
  template: '<App/>'  // 模板
})

2.App.vue详解

<!-- HTML 代码模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<!--JS 代码 -->
<script>
// JS 代码, 导入我们自己写的模块！
import HelloWorld from './components/HelloWorld'
// 导入对象App，在其他地方导入的话就可以直接使用了！
export default {
  name: 'App',
  components: {
    HelloWorld  // 组件！
  }
}
</script>

<!--CSS 样式： 如果没有加 scoped 就是全局生效，如果增加了就是当前页面生效！-->
<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>

5.vue-cli集成vue-router

安装vue-router

npm install vue-router --save-dev

6.基于vue-cli编写自己的项目

1、清空项目的多余内容！

2、定义自己的组件

这里在components下面定义Content.vue和Main.vue两个组件
Content.vue

<template>
  <div>
    <h1>内容页</h1>
  </div>
</template>

<script>
export default {
  name: 'Content'
}
</script>

Main.vue

<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script>
export default {
  name: 'Main'
}
</script>

3、编写路由

index.js

// 导入Vue
import Vue from 'vue'
// 导入我们的路由组件
import VueRouter from 'vue-router'
// 显示的调用Vue路由
Vue.use(VueRouter);

// 导入我们自己写的组件, 不需要增加 .vue 后缀！
import Content from '../components/Content'
import Main from '../components/Main'

// 配置路由
export default new VueRouter({
  // 就是我们上周讲的
  routes: [
    // 规则1 , content 内容页跳转规则！
    {
      path: '/content',
      name: 'content',
      component: Content
    },
    // 规则2
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ]
})

4、在 main.js 中配置路由

// 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'

Vue.config.productionTip = false

// 导入我们的路由规则, 自动识别 index.js
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, // 挂载路由！
  components: { App },
  template: '<App/>'
})

5、在App.vue中使用

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <!-- 出口，展现路由内容的地方！ -->
    <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>

6、测试查看结果