vue-cli初探

首先按照官方文档上的步骤创建一个vue的项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project

当运行 vue init webpack my-project时，需要填写和选择一些信息，我是这样选择的

? Project name my-project
? Project description A Vue.js project
? Author ****
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

之后进入创建的项目并运行

$ cd my-project
$ npm run dev 

此时控制台上会出现

Your application is running here: http://localhost:8080

访问http://localhost:8080怎会看到

这就代表运行成功了。

生成的目录中，APP.vue为组件的主入口，

<template>
  <div id="app"> 
    <img src="./assets/logo.png">  
    <router-view/>
  </div>
</template>

其中router-view会根据/router/index.js调用不同的component，初始化时

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

Vue.use(Router)

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

当路径为'/'时，<router-view>根据路径渲染成<HelloWorld></HelloWorld>,调用了/ components/HelloWorld.vue ,生成了图标下面的文字。