1. vue-cli 简介

Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构

2. vue-cli 安装步骤

  • 安装npm 或 cnpm
npm config set registry https://registry.npm.taobao.org
npm install cnpm -g
  • 安装webpack、webpack-cli

    • 建议全局安装一次:
cnpm install webpack webpack-cli –g
    • 本地安装一次:
cnpm install webpack webpack-cli --save-dev
  • 安装vue-cli

    • 全局安装vue-cli后,可直接使用vue命令
cnpm install vue-cli -g
  • 创建基于webpack的项目结构

    • vue init webpack 项目名称

  • 运行项目

    • npm run dev

3. vue-cli项目目录结构

  • build:构建项目的配置目录
  • config:配置目录,默认配置没有问题(不用管)
  • node_modules:项目开发依赖的一些模块
  • src:开发目录,基本上工作在此开展
  • static:静态资源目录,图片、字体等资源
  • .xxx:配置文件,语法配置,git配置。(不用管)

  • main.js:项目的入口文件
  • App.vue:根组件,就如代码中的 new Vue()  div id=”app”
  • components:自定义的组件目录

  • router/index.js:路由配置文件

  • 单文件组件:将一个组件需要的所有内容(template、js、css)单独写到一个文件中,便于开发与维护。单文件组件后缀常命名为:xxx.vue

4. 例子

  • 在默认的目录结构的基础上,创建一个Test组件

Test.vue 代码

<template>
<div>
<h1>Test组件</h1>
</div>
</template>
<script>
export default{ }
</script>
<style>
h1{color:green}
</style>
  • 在router/index.js 路由文件中导入模块并添加路由

index.js 代码(红色部分)

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'Test',
component: Test
}
]
})
  • 访问http://localhost:8080/#/test

5. 项目打包

运行npm run build,将项目上线后运行时所需文件打包到一个文件中

执行完毕,在vuedemo目录下会创建dist目录,其中保存了打包之后的文件

Vue.js 相关知识(脚手架)的更多相关文章

  1. Vue.js相关知识4-路由

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. Vue.js相关知识3-路由

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Vue.js相关知识2-组件

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. Vue.js相关知识1

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. Vue.js 相关知识(路由)

    1. 简介 路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤 安装vue-router或者直接引入v ...

  6. Vue.js 相关知识(动画)

    1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...

  7. Vue.js 相关知识(组件)

    1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...

  8. Vue.js 相关知识(基础)

    1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪 注:学习 vue.js 时,一定要抛弃 jQuery 的 ...

  9. Vue.js 在 webpack 脚手架中使用 cssnext

    Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...

随机推荐

  1. Windows XP添加硬盘后系统不能识别(没有任何反应)

    解决方法: 1.右键我的电脑--管理--设备管理器--IDE ATA/ATAPI控制器,启用次要IDE通道和主要IDE通道,打开属性,在高级设置里,将设备类型设置为自动检测,重启. 2.硬盘格式为GP ...

  2. form表单中使用a标签代替button或commit进行数据提交

    1.申明form的id:xxx 2.在<a>标签内书添加属性 onclick="document:xxx.submit()" ​

  3. yum安装某个包出现冲突的情况

    yum安装是非常方便的,可以自动解决依赖问题,但是有时候我们安装包会出现冲突,这个时候我们就要查找是哪些包与哪些包出现冲突,然后再针对性的解决问题. 一般来说起冲突的包会报出来,主要为两点 1.包与包 ...

  4. 关于服务器端的Json文件的接收,踩了一早上的坑的问题

    JSON文件的发送和接收 服务器端接收的JSON文件也是String型的文件,因此不可以直接写成如下的格式,此错误格式下无法找到发送的{}内的数据,服务器会报错提示无法找到你需要的类型数据,也就是根本 ...

  5. 团队作业——Alpha冲刺 11/12

    团队作业--Alpha冲刺 冲刺任务安排 杨光海天 今日任务:预览界面布局实现,并留下交互接口 明日任务:预览界面中自定义保存的实现 郭剑南 今日任务:尝试解决Python编写程序无法在Android ...

  6. HtmlUnit

    htmlunit 是一款开源的java 页面分析工具,读取页面后,可以有效的使用htmlunit分析页面上的内容.项目可以模拟浏览器运行,被誉为java浏览器的开源实现.是一个没有界面的浏览器,运行速 ...

  7. error occurred at recursive SQL level 1

    ORA-00604: error occurred at recursive SQL level 1出现的错误:java.sql.SQLException: ORA-00604: error occu ...

  8. CentOS7下安装NVIDIA独立显卡驱动出现X service error问题解决方法

    问题症状: 最近在CentOS7下安装NVIDIA独立显卡驱动的过程中出现X service error问题,如下图所示: 解决方法: 0.到NVIDIA 官网上下载驱动文件(.run 格式) : N ...

  9. Linux防火墙工具Firestarter

    Firestarter是一个非常好用的防火墙图形化配置工具,作者和开发者是芬兰人. 首先肯定的说Firestarter防火墙是一款非常优秀的基于GUI图形用户界面下的,完全免费的自由软件,它为中小型L ...

  10. Android cannot be cast to android.app.Fragment

    10-21 17:33:45.171: E/AndroidRuntime(7644): java.lang.RuntimeException: Unable to start activity Com ...