vue学习笔记-初始化一个vue项目(1)

1.cnpm install -g vue-cli
Usage:
vue init <template-name> <project-name>

2.我们一般使用webpack模版构建应用
vue init webpack web04

3.安装vue-router
cnpm install vue-router --save-dev
4.npm run dev

简单的目录结构:

|-index.html
|-main.js 入口文件
|-App.vue vue文件,官方推荐命名法
|-package.json 工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.js webpack配置文件

ES6: 模块化开发

导出模块:
export default {}
引入模块:
import 模块名 from 地址

原文地址:https://www.cnblogs.com/studyshufei/p/8542288.html

时间: 2024-11-05 19:42:51

vue学习笔记-初始化一个vue项目(1)的相关文章

vue学习笔记之初识vue——实例方法声明

如果需要在点击鼠标时,执行一个复杂的操作,那么采用单一的表达式 作为v-on指令值就不够了 -- 我们需要将复杂的操作封装为Vue实例的 一个方法,然后将v-on指令的值设置为这个方法. 使用methods配置项来声明Vue实例的方法.当Vue.js创建一个Vue实例时, 会将methods配置项中声明的方法,挂接到Vue实例对象上: 实例方法可以直接通过实例对象调用,例如,对于上图中的vm实例: vm.handler(); //正确 实例方法另一个常见的用途,是将方法名声明为v-on指令的值,

vue学习笔记第一天-vue.js简易留言板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable

用wackpack初始化一个vue项目的目录讲解

1.初始化:我在F:\vue+node商城demo\vue+express+node+wackpack目录中初始化一个imoocdemo项目: 之后,进入 imoocdemo 文件夹输入npm install安装依赖的包: 完成后,目录如下: 我在vscode打开后如下:

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

Vue学习笔记目录

本文为转载,原文:Vue学习笔记目录 Vue介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据

Vue学习笔记进阶篇——Render函数

本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. <h1> <a name="hello-world" href="#hello-world"> Hello world! </a> </h1>

Vue学习笔记进阶篇——过渡状态

本文为转载,原文:Vue学习笔记进阶篇--过渡状态Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢,比如: 数字和运算 颜色的显示 SVG 节点的位置 元素的大小和其他的属性 所有的原始数字都被事先存储起来,可以直接转换到数字.做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态. 状态动画和watcher 通过 watcher 我们能监听到任何数值属性的数值更新.可能听起来很抽象,所以让我们先来看看使用 T