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. Controller的激活(1)

    Public interface IController { void Execute(RequestContext requestContext) } Public abstract Class C ...

  2. brew 又叫Homebrew,是Mac OSX上的软件包管理工具

    brew 又叫Homebrew,是Mac OSX上的软件包管理工具; Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装.卸载.更新.查看.搜索等很多实用的功能.简单的一条指令,就可以 ...

  3. 代码的结合性:继承 扩展 组合 变换--swift暗含的四根主线

    类型继承: 类型扩展: 类型组合: 类型变换:

  4. 【每天学一点Linux】快速清除文件内容

    linux几种快速清空文件内容的方法 几种快速清空文件内容的方法: $ : > filename #其中的 : 是一个占位符, 不产生任何输出. $ > filename $ echo “ ...

  5. VSCode 如何操作用户自定义代码片段

    自己写了一些根据自己习惯弄成的自定义代码片段,不喜跳过 很简单,快速过一下,F1,然后输入 snippets vue代码片段 { // Place your snippets for vue here ...

  6. JavaScript基础13——面向对象

    什么是面向对象? 面向对象(Object Oriented,OO)是软件开发方法.面向对象的概念和应用已超越了程序设计和软件开发,扩展到如数据库系统,交互式界面,应用结构,应用平台,分布式系统,网络管 ...

  7. 洛谷 P1144 最短路计数 题解

    P1144 最短路计数 题目描述 给出一个\(N\)个顶点\(M\)条边的无向无权图,顶点编号为\(1-N\).问从顶点\(1\)开始,到其他每个点的最短路有几条. 输入格式 第一行包含\(2\)个正 ...

  8. eclipse debug调试 class文件 Source not found.

      1.情景展示 明明有class文件,为什么提示没有? 2.原因分析 这是eclipse与myeclipse的不同之处,myeclipse会自动加载运行时所需的的class文件,而eclipse则需 ...

  9. plsql excel导入报错:未发现数据源名称并且未指定默认驱动程序

        1.情景展示 使用plsql的odbc导入器,导入excel数据时,报错信息如下: anydac 未发现数据源名称如何处理 2.原因分析 操作系统的问题,我的是64位的系统,plsql支持32 ...

  10. 【Beta】Scrum meeting 8 & 助教参会记录

    目录 写在前面 进度情况 任务进度表 Beta-1阶段燃尽图 遇到的困难 助教参会会议情况 会议具体内容 Q:最近压力大吗?临近期末,注意好时间安排 Q:最近进度如何,以后的计划如何 Q:这段时间遇到 ...