Vue-新手入门

Webpack 下vuejs项目文件结构

创建项目

vue init webpack my-project. // 创建 vue 项目

项目结构如下：

build         // 编译用到的脚本
config			        // 各种配置
node_modules  // node第三方包
src           // 源代码
static        // 静态文件，暂时无用
index.html.   // 最外层文件
package.json. // node项目配置文件

新建路由

import Vue from 'vue'
import Router from 'vue-router'
// 引入SayHi 页面
import SayHi from "@/component/SayHi"

Vue.use(Router)

export default new Router({
  routes: [
  // 定义了say_hi 的url
    	{
      path: 'say_hi',   //对应一个url路径
      name: 'SayHi',    //vuejs内部使用的名称
      component: SayHi  //对应的.vue页面的名字
    }
  ]
})

新建 Component

创建 Src/Component/SayHi.vue

<template>
  <div>你好 vuejs!</div>
</template>

<script>
  export default {
    data () {
      return {}
    }
  }
</script>

<style>
  
</style>

简写…/…./…/

@ 符号，代表源代码目录，一般指向 src文件