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. MySQL主从复制日常管理维护篇

    日常工作中,我们需要经常进行一些监控和管理维护工作,以便能及时发现一些复制中的问题,并尽快解决,以此来保证复制能够正常工作 1.查看从库状态 MySQL [(none)]> show slave ...

  2. [python]pip 版本9.0.1升级到10.0.1故障解决办法

    问题背景: 在做android自动化时使用到第三方库uiautomator时,提示要安装,但安装该uiautomator库时提示当前的pip版本偏低,需要安装10.0.1版本方可.但在升级到升级到该版 ...

  3. spa(单页面应用)的优缺点[转]

    优点:spa(单页面应用)1.用户体验好.快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染.2.基于上面一点,SPA相对对服务器压力小.缺点:1: seo 不利于搜索引擎优化2: 初 ...

  4. 解压版中文乱码问题MYSQL中文乱码

    安装的是解压版的MYSQL,具体配置参考:https://jingyan.baidu.com/article/9c69d48f85032f13c9024e15.html . 1:解压之后copy 一个 ...

  5. maven项目中,lib目录下有自己私有的包,则需要配置一下代码,然后进行打包

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compi ...

  6. Zookeeper入门(三)之工作流

    一旦ZooKeeper集合启动,它将等待客户端连接.客户端将连接到ZooKeeper集合中的一个节点.它可以是leader或follower节点.一旦客户端被连接,节点将向特定客户端分配会话ID并向该 ...

  7. Dubbo -- 系统学习 笔记 -- 安装手册

    安装手册 示例提供者安装 示例消费者安装 Zookeeper注册中心安装 Redis注册中心安装 简易注册中心安装 简易监控中心安装 管理控制台安装 推荐使用Zookeeper注册中心 你可以只运行D ...

  8. leetcode650—2 Keys Keyboard

    Initially on a notepad only one character 'A' is present. You can perform two operations on this not ...

  9. Android 关于在ScrollView中加上一个ListView,ListView内容显示不完全(总是显示第一项)的问题的两种简单的解决方案

    是这样的哈: 有这样一个需求: 1.显示一个界面,界面上有一个列表(ListView),列表上面有一个可以滚动的海报. 2.要求在ListView滚动的过程中,ListView上面的海报也可以跟着Li ...

  10. HDU 2647 Reward(拓扑排序,vector实现邻接表)

    Reward Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...