更新软件源列表

 sudo apt update

nodejs安装

sudo apt install nodejs
nodejs -v #查看版本

npm安装

sudo apt install npm
npm -v # 查看版本

cnpm安装(淘宝NPM镜像)

cnpm是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

sudo  npm install -g cnpm --registry=https://registry.npm.taobao.org   # 安装时会比较慢 看网络情况
cnpm -v #查看版本

vue脚手架安装

sudo cnpm install -g vue-cli
vue -V # 查看版本

创建vue项目

vue init webpack 项目名

进入项目文件夹内,安装项目依赖

sudo  cnpm install

运行项目

sudo npm run dev
访问http://localhost:8080

Ubuntu18.04搭建Vue开发环境的更多相关文章

  1. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  2. Ubuntu 12.04 搭建Android开发环境

    Ubuntu 12.04 搭建Android开发环境 2013/7/29 Linux环境下搭建Android开发环境 大部分开发人员可能都在Windows下做开发,可能是感觉在Windows下比较方便 ...

  3. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  4. Ubuntu16.04搭建LAMP开发环境

    Ubuntu16.04搭建LAMP开发环境 虚拟机上安装好Ubuntu16.04后,是一台空白的Ubuntu.我的目的是搭建LAMP环境,顺便搭一个Python Django环境. 基本设置 1.配置 ...

  5. 十分钟上手-搭建vue开发环境(新手教程)

    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...

  6. 1.WIN10下搭建vue开发环境

    WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...

  7. 搭建vue开发环境的步骤,六步完成

    搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:h ...

  8. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

  9. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

  10. Ubuntu16.04搭建各种开发环境的IDE: QT5 , CodeBlocks ,eclipse-cdt, PyCharm

    搭建Ubuntu下C/C++以及Python的集成开发环境,采用双系统(Win7+Ubuntu)的Ubuntu16.04-LTS系统, 关于双系统的搭建可以参考下面博客(图文十分详细):https:/ ...

随机推荐

  1. [转帖]Intel“革命性”X86s架构,带来哪些颠覆及影响?

    https://www.eet-china.com/mp/a221822.html 英特尔发布了一份新的白皮书(Intel X86-S扩展架构规格),计划简化其处理器指令集架构(ISA).英特尔提供了 ...

  2. [转帖]Linux磁盘I/O(二):使用vm.dirty_ratio和vm.dirty_background_ratio优化磁盘性能

    文件缓存是一项重要的性能改进,在大多数情况下,读缓存在绝大多数情况下是有益无害的(程序可以直接从RAM中读取数据).写缓存比较复杂,Linux内核将磁盘写入缓存,过段时间再异步将它们刷新到磁盘.这对加 ...

  3. [转帖]BIS出口管制新规说明会,进一步明确十大问题

    https://zhuanlan.zhihu.com/p/573765504 10月13日晚9点,BIS就出口管制新规举行电话会议简报,出口执法助理副部长Thea Kendler主持会议.小白总结要点 ...

  4. [转帖]Native Memory Tracking 详解(3):追踪区域分析(二)

    https://www.modb.pro/db/539804 上篇文章 Native Memory Tracking 详解(2):追踪区域分析(一) 中,分享了NMT追踪区域的部分内存类型--Java ...

  5. 总结: Redis 查看key大小的简单总结

    Redis 查看key大小的简单总结 第一步: 安装rdbtools 吐槽一下 python 非常不熟悉 第一步 安装epel以及python等工具 yum install epel-release ...

  6. TS声明promise返回来的数据类型

    promise返回来的数据类型 interface backResult{ code: number, data: { name:string,age:number}[], //数组里面的对象类型,这 ...

  7. 每日一库:Memcache

    Memcache 是一个高性能.分布式的内存缓存系统,常用于缓存数据库查询结果.API调用结果.页面内容等,以提升应用程序的性能和响应速度.下面详细介绍一些 Memcache 的特点和使用方式: 内存 ...

  8. 从零开始配置 vim(6)——缩写

    关于vim能快速编辑文本的能力,我们见识到了 operator + motion ,见识到了. 范式和宏.甚至可以使用命令来加快文本编辑.在后面我们又介绍了快捷键绑定来快速执行我们想要的操作.今天我们 ...

  9. 微信小程序-组件生命周期方法

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html 正如官方显示组件的生命周期中常用的 ...

  10. 微信小程序-页面生命周期方法

    在经过上一篇文章的介绍之后,我们知道了大体的生命周期在什么时候执行,这次主要是以代码的形式来展示一下具体的阶段执行什么生命周期方法. 首先我们编写一个代码可以从首页跳转到日志页面: <!--in ...