vue的cli用法

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用,该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

准备条件

node.js客户端下载
下载地址：https://nodejs.org/zh-cn/
下载安装即可。

安装命令

# 安装全局vue-cli
npm install --global vue-cli

# 创建一个基于webpack 模板的新项目
vue init webpack my-project

# 安装依赖
cd my-project
npm install

# 运行
npm run dev

默认端口为8080 直接在浏览器中访问 http://localhost:8080 即可出现页面，则安装成功

主要文件目录如下：

--build
--config
--node_modules
--src(主要目录)
   |--assets 
   |--components(一般作为页面防止目录)
   |--router(如果按照router模块的话)
       |--index.js
   |--APP.vue
   |--main.js
--index.html

我们试着增加一个页面：

在router/index.js中参照helloWord增加一个Home路由。


import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'   // 增加的

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    
    // 增加的home与上面import对应
    {
      path: '/home',  // 访问路径 localhost:8080/home
      name: 'Home',   // 别名
      component: Home   // 与import取的名字对应
    },
    
    // 匹配任何没有定义的路由，将其定义到根目录下面
    {path:'*',redirect:'/'}
  ]
})

上面增加了一个路由，则需要在components目录下增加一个Home.vue 的页面
<template>
  <h1>我是home</h1>
</template>

这就完成了一个vue页面的搭建，我们在浏览器中输入：
localhost:8080/home 就能访问components目录下面Home.vue 目录