使用vue搭建应用一入门
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搭建应用一入门的更多相关文章
- vue-cli脚手架搭建项目简单入门一
搭建系统: Windows系统 简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行, ...
- Vue.js 十五分钟入门
本文经授权转载,仅用于学习,版权归原作者所有. TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误. Vue 很 ...
- 安卓自动化测试(2)Robotium环境搭建与新手入门教程
Robotium环境搭建与新手入门教程 准备工具:Robotium资料下载 知识准备: java基础知识,如基本的数据结构.语法结构.类.继承等 对Android系统较为熟悉,了解四大组件,会编写简单 ...
- 使用 gulp 搭建前端环境入门篇(转载)
本文转载自: 使用 gulp 搭建前端环境入门篇
- 《vue.js2.0从入门到放弃》学习之路
原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...
- Vue (一) --- vue.js的快速入门使用
=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...
- vue搭建前端相关命令
Vue搭建.新建工程并打开浏览器调试的指令: 这四行命令就是我们接下来工作了. 1.npm install –global vue-cli 我们在安装好nodejs后就可以用到“npm”这个前缀指令, ...
- 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)
深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...
- webpack4+Vue搭建自己的Vue-cli
前言 最近在看webpack4,深感知识浅薄,这两天也一直在思考cli的配置,借助一些别人的实践,尝试自己搭建vue的项目,这里使用webpack4版本,之前我在网上查找别人的vue项目搭建,但是都是 ...
随机推荐
- test20191020 往复
往复 Coldhac 做不出题了,他在长为 n 的走廊里走来走去.从位置 1 开始, 每次他会向前走长为 i ∈ [1, k] 的一步(不能超出走廊的范围),直至到达位 置 n. 在想出正解前,Col ...
- Go语言 - 反射
reflect包 在Go语言的反射机制中,任何接口值都由是一个具体类型和具体类型的值两部分组成的(我们在上一篇接口的博客中有介绍相关概念). 在Go语言中反射的相关功能由内置的reflect包提供,任 ...
- 选择 IDE 的目的
选择 IDE 的目的 这个不消多说了, 在我看来,最重要的无非三点: 自动补全 自定义模板(俗称 custom snippets) IDE 内 debug. 代码静态检查(错误提示,这里主要包括 es ...
- springcloud(三)
雪崩效应 一.为什么需要 Hystrix? 在微服务架构中,我们将业务拆分成一个个的服务,服务与服务之间可以相互调用(RPC).为了保证其高可用,单个服务又必须集群部署.由于网络原因或者自身的原因,服 ...
- cratedb 做为prometheus 的后端存储
prometheus 提供了remote_write 以及remote_read 的数据存储方式,可以帮助我们进行数据的长时间存储.方便查询 cratedb 提供了对应的adapter,可以直接进行适 ...
- codeblock代码片段
for循环 ; $(index name)<| ; $(index name)++ ){ } 2. 反向for循环 ; $(index name)>= ; $(index name)-- ...
- 洛谷 P1099 树网的核+P2491 [SDOI2011]消防
写在前面:由于是双倍经验就放一块了,虽然数据范围差的有点大. 题目链接 题意:在树的直径上选择一条长度不超过s的路径使这条路径上的点到树上任意点的最大距离最小. 这题数据好像非常水,我写了上界n^2不 ...
- shell 四则运算
test.sh #/bin/bash read -p "请输入第一个数:" a read -p "请输入第二个数:" b if [ $a -gt $b ] th ...
- 范仁义html+css课程---11、html补充知识
范仁义html+css课程---11.html补充知识 一.总结 一句话总结: 小于号(<):< 大于号(>):> 空格: 二.html 字符实体 1.小于号(<)和大 ...
- 如何查看电脑的GPU信息
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_33690342/article/ ...