1.准备

安装nodejs,配置环境变量

安装了nodejs,也就安装了npm

安装webpack

npm install webpack -g

安装vue脚手架项目初始化工具 vue-cli

npm install vue-cli -g

使用淘宝镜像

npm config set registry https://registry.npm.taobao.org 

安装yarn,facebook发布的nodejs包管理工具

npm i yarn -g -verbose

yarn改为淘宝镜像

yarn config set registry https://registry.npm.taobao.org

2.创建项目

(1)用vue-cli生成项目

vue init webpack robin-ui

(2)安装依赖包

cd robin-ui
yarn install

(3)启动

npm run dev

浏览器打开http://localhost:8080

3.导入到 VS Code

文件——》将文件夹添加到工作区

VS Code 安装扩展插件 vetur

打开 robin-ui

build——webpack构建

config——配置目录

node_modules——依赖

src——代码目录

  main.js核心文件

  App.vue项目入口

static——静态资源

index.html——入口

package.json——项目配置

4.打包命令

npm run build

生成到 dist 目录,部署时将dist直接复制到服务器上

  

使用vue搭建应用一入门的更多相关文章

  1. vue-cli脚手架搭建项目简单入门一

    搭建系统: Windows系统 简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行, ...

  2. Vue.js 十五分钟入门

    本文经授权转载,仅用于学习,版权归原作者所有. TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误. Vue 很 ...

  3. 安卓自动化测试(2)Robotium环境搭建与新手入门教程

    Robotium环境搭建与新手入门教程 准备工具:Robotium资料下载 知识准备: java基础知识,如基本的数据结构.语法结构.类.继承等 对Android系统较为熟悉,了解四大组件,会编写简单 ...

  4. 使用 gulp 搭建前端环境入门篇(转载)

    本文转载自: 使用 gulp 搭建前端环境入门篇

  5. 《vue.js2.0从入门到放弃》学习之路

    原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...

  6. Vue (一) --- vue.js的快速入门使用

    =-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...

  7. vue搭建前端相关命令

    Vue搭建.新建工程并打开浏览器调试的指令: 这四行命令就是我们接下来工作了. 1.npm install –global vue-cli 我们在安装好nodejs后就可以用到“npm”这个前缀指令, ...

  8. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  9. webpack4+Vue搭建自己的Vue-cli

    前言 最近在看webpack4,深感知识浅薄,这两天也一直在思考cli的配置,借助一些别人的实践,尝试自己搭建vue的项目,这里使用webpack4版本,之前我在网上查找别人的vue项目搭建,但是都是 ...

随机推荐

  1. wordpress文章显示同一分类下的上一篇下一篇

    我们在用wordpress开发网站的时候会在文章页中引入上一篇下一篇,但是发现新闻页的上下文章有可能是产品分类的post,这个就不太合理,如何显示同一分类下的上一篇下一篇文章呢?随ytkah一起来看看 ...

  2. java内部类的本质

    连接与通信,作为桥接中间件存在. 内部类和主体类可以无障碍通信: 1.通过继承连接实现: 2.通过接口连接通信: 形式: 1.命名空间: 2.运行上下文: 其它: 信息隐藏是次要功能. 内部类 Jav ...

  3. 命令行创建react.js项目

    npm install -g create-react-app  /*搭建一个全局的脚手架*/ create-react-app my-demo        /*创建项目 my-demo是项目名字* ...

  4. 使用grok exporter 做为log 与prometheus 的桥

    grok 是一个工具,可以用来解析非结构化的日志文件,可以使其结构化,同时方便查询,grok 被logstash 大量依赖 同时社区也提供了一个prometheus 的exporter 可以方便的进行 ...

  5. [RN] React Native 仿美团下拉筛选菜单控件

    React Native 仿美团下拉筛选菜单控件 演示效果如下: 使用方法如下: 1.安装 npm install react-native-dropdownmenus --save react-na ...

  6. 用正确的姿势使用 celery

    简介 celery 是一个简单.灵活.可靠的分布式系统,可以处理大量的消息. celery 是一个任务队列,关注实时处理,同时支持任务调度. 它的工作机制是这样的: 快速使用 安装:pip3 inst ...

  7. lg4820 书堆

    题目链接 题意概述:n本书,在桌子边缘堆放,求最长长度. 首先……我们需要一点初中物理知识来推一下规律. 下图是一本书的情况,一本书时书伸出1/2处于临界状态,显然. 两本书时,把两本书看作整体,则有 ...

  8. 垃圾邮件分类实战(SVM)

    1. 数据集说明 trec06c是一个公开的垃圾邮件语料库,由国际文本检索会议提供,分为英文数据集(trec06p)和中文数据集(trec06c),其中所含的邮件均来源于真实邮件保留了邮件的原有格式和 ...

  9. 轮播模仿臭美APP,vue,swiper

    介绍:轮播使用了swiper,重要用于移动端滑动,详情可查看官网 1.首先用npm安装        npm install swiper 2.main.js 中引入CSS     import 's ...

  10. 第10组 Alpha冲刺(3/4)

    队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 制作登录注册界面前端 展示GitHub当日代码/文档签入 ...