vue 第一天

环境安装

• 下载安装nodejs

  • 官网下载地址：nodejs下载
  • 安装过程一直点下一步即可

• 安装淘宝镜像

  • npm install -g cnpm --registry=https://registry.npm.taobao.org
    

• 安装webpack

  • cnpm install webpack -g
    

• 安装vue脚手架

  • npm install vue-cli -g
    

• 在硬盘上找一个文件夹放工程，比如：E:\vueDemo

  • vue init webpack firstvue
    

• 会有一些初始化的设置

  ①、Project name (sanfeng1)；项目名称（sanfeng1）。（确定按enter，否按N） 
  
  ②、 Project description (A Vue.js project)；项目描述（一vue.js项目）。（随意输入一段简短介绍，用英文）
  
  ③、Author (sunsanfeng)；作者（sunsanfeng）。（确定按enter，否按N） 
   
  ④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render 　　　　　　　　functions are required elsewhere；Vue公司的建立（使用箭头键）>运行时+编译器：大多数用户推荐运行时间：约6kb轻民+ gzip，但模板（或任何Vue具体HTML）只允许在。VUE文件渲染功能是必需的其他地方。（按enter） 
   
  ⑤、Install vue-router? (Y/n)；安装的路由？（/ N）。（可安可不安，以后也可以再安，根据需求选择） 
   
  ⑥、Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ N）。（使用ESLint语法，就要做好心理准备，除非你非常懂ESLint语法，要不就会处处报错，我就被逼疯过，建议N） 
   
  ⑦、Setup unit tests with Karma + Mocha? (Y/n)；设置单元测试？（Y / N）。（选N） 
   
  ⑧、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？（Y / N）。（选N）
  

• 第一个vue项目就创建好啦

安装项目依赖：

• npm install
  

• 安装vue路由模块 vue-router 和网络请求模块 vue-resource

  • cnpm install vue-router vue-resource --save
    

vue项目启动：

1. 进入项目根目录：

   （1）. 安装依赖（此过程有些漫长，请耐心等待）

   • npm install 
     

   （2）. 设置镜像（推荐设置下淘宝的镜像源）

   • npm install --registry=https://registry.npm.taobao.org
     

   （3）. 启动项目

   • npm run dev
     

单页面组件：

这种App.vue 文件，在Vue中官网叫它做组件，单页面的意思是 结构、样式、逻辑在同一个文档中，当我们引入这个文件后，就相当于引入对应的结构、样式和JS代码。

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

路由：

在 src/main.js 中有一句引入路由器的代码：

import router from './router' /**引入路由配置 */

在router目录下的 js文件：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Firstcomponent from '@/components/Firstcomponent'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/first',
      name: 'Firstcomponent',
      component: Firstcomponent
    }
  ]
})

来看目录结构：

前面先引入了路由插件 vue-router，然后显示声明要用路由Vue.use(Router)。HelloWorld、Firstcomponent都是页面（也可以是组件），接着注册路由器，然后开始配置路由。

如果要访问 http://localhost:8080/#/first/second 的话要如何配置呢？如下：

只要给路由加一个子路由配置即可：

{
      path: '/first',
      name: 'Firstcomponent',
      component: Firstcomponent,
      children:[
        {
          path: '/',
          name: 'second',
          component: second
        }
      ]
}

总结：

1. 搭建Vue环境
2. 了解Vue项目结构
3. 单页面组件
4. 路由