1. cd到工作目录
2. npm init -y
3. 先查看有没有安装全局的vue-cli,:vue-V,没有的话安装一下:npm install vue-cli
4. 创建项目: vue init webpack Luffy (项目名)
如果出问题: Mac安装Vue-cli时 提示bash: vue: command not found问题
http://www.cnblogs.com/wz2018/p/9849000.html

? Project name luffy
? 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) (Use arrow keys)
❯ Yes, use NPM

5. 项目启动 npm run dev

目录结构:
build: 出口文件,webpack配置文件
src: 工作目录 main 主入口文件
index.js: 注册组件

component 创建组件,
app.vue 中注册

重启项目 需要cd 进入自己建立的项目下 然后 npm run dev

使用element-ui

1. 在 main.js 中写入以下内容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
加载: Vue.use(ElementUI);

2. MyHeader中添加组件
复制到组件中, 根据条件添加 data数据

添加路由:
1. component中建立组件,
2. 在index.js中注册组件 先导入组件, 有多少个注册多少个组件, path:'/', name:'xxx', component:组件名
3. template中 标签添加 :router="true"
4. app.vue中 添加 <router-view></router-view>

打包
npm run build

VUEX 组件通信
1. cd 到项目目录,安装 npm i vuex
2. 不解耦: 导入/use/实例化/注册
解耦: 新建store.js,导入vue,vuex/use/export, main.js导入,注册

如何启动一个Vue2.x项目的更多相关文章

  1. 如何启动一个Vue3.x项目

    1. 安装node.js 2. cd到项目目录下 3. npm run serve Node.js下载与安装(npm) Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运 ...

  2. 在服务器中无法自宿主启动一个webapi项目,引出查看系统端口是否被占用

    在windows server下启动一个webapi的.net core项目报错 如下图: 让我以为服务器还需要别的配置.后来发现原来是线程被占用了. 在windows下查看某线程是否被占用的命令如下 ...

  3. IdentityServer4[2]:启动一个新的IdentityServer项目

    启动一个新的IdentityServer项目 从头开始,从基础开始,然后变得更加复杂,循序渐进的学习 工具:VS2017 15.9.8 .Net Core2.2 基本过程 创建一个新的ASP.NET ...

  4. 使用Vue2+webpack+Es6快速开发一个移动端项目,封装属于自己的jsonpAPI和手势响应式组件

    导语 最近看到不少使用vue制作的音乐播放器,挺好玩的,本来工作中也经常使用Vue,一起交流学习,好的话点个star哦 本项目特点如下 : 1. 原生js封装自己的跨域请求函数,支持promise调用 ...

  5. Vue2构建项目实战

    转载整理自http://blog.csdn.net/fungleo/article/details/77575077 vue构建单页应用原理 SPA 不是指水疗.是 single page web a ...

  6. 从零开始搭建Vue2.0项目(一)之快速开始

    从零开始搭建Vue2.0项目(一)之项目快速开始 前言 该样板适用于大型,严肃的项目,并假定您对Webpack和有所了解vue-loader.确保还阅读vue-loader的文档,了解常见的工作流程配 ...

  7. 【.net 深呼吸】启动一个进程并实时获取状态信息

    地球人和火星人都知道,Process类既可以获取正在运行的进程,也可以启动一个新的进程.在79.77%应用场合,我们只需要让目标进程顺利启动就完事了,至于它执行了啥,有没有出错,啥时候退出就不管了. ...

  8. 如何启动一个Java Web应用

    最近使用一个开源项目写程序,为了方便沟通加入了相关的讨论群,经常在群里看到有人问项目怎么启动不起来,在此提供一下解决思路1.查看自己下载的项目目录通过文件夹结构,你能够看出来你下载的是一个maven项 ...

  9. android技巧(一):如何方便知晓当前Activity?如何管理应用中的Activity?如何最佳的启动一个Activity?

    1.如何方便知晓当前Activity? 可以不看代码根据当前界面就知道界面所在Activity的写法: 建立BaseActivity,继承自Activity,在BaseActivity的OnCreat ...

随机推荐

  1. Redis---Hash(字典)

    1. 概述 Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). ...

  2. Vue过渡动画—Vue学习笔记

    要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中. 原理:通过在特定的时刻增加/移除样式实现. ...

  3. Office 2010激活 NO KMS products detected问题

    今天用office2010激活工具Office 2010 Toolkit激活安装的office2010时悲剧的遇到了这个问题,如下图: (这张图是从网上找的,不过和我遇到的问题是一样的). 然后上网搜 ...

  4. 线程&线程控制

    线程基本概念: 1 线程 (1)概念:linux下没有真正的线程,所谓的线程都是通过进程的pcb模拟的,因此linux下的线程也称为“轻量级进程”,之前我们所说的进程现在看来,可以理解为:只有一个线程 ...

  5. [工具]Tomcat CVE-2017-12615 远程代码执行

    工具: K8_TocmatExp编译: VS2012  C# (.NET Framework v2.0)组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http://qqhack8.b ...

  6. Redis笔记(2)单机数据库实现

    1.前言 上节总结了一下redis的数据结构和对象构成,本章介绍redis数据库一个基本面貌,是如何设计的. 2.数据库 服务器结构redisServer: redisDb *db: 一个数组,保存服 ...

  7. Selenium自动化测试Python一:Selenium入门

    Selenium入门 欢迎阅读Selenium入门讲义,本讲义将会重点介绍Selenium的入门知识以及Selenium的前置知识. 自动化测试的基础 在Selenium的课程以前,我们先回顾一下软件 ...

  8. Android_EditText 打勾显示输入的密码 --EditText与setTransformationMethod

    实现目标: 实现原理: 为CheckBox添加一个监听器事件; 实现的源码: package edu.cquptzx.showPassword; import android.app.Activity ...

  9. Java反射机制二 获取方法的返回值或参数的泛型信息

    在使用反射机制时,我们经常需要知道方法的参数和返回值类型,很简单  ,下面上示例,示例中的两个方法非常相似 package deadLockThread; import java.lang.refle ...

  10. 资深程序员的Metal入门教程总结

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由落影发表于云+社区专栏 正文 本文介绍Metal和Metal Shader Language,以及Metal和OpenGL ES的差异 ...