近期梳理了一下win和linux下安装vue项目,总结一下,希望对于看的人有帮助,废话不多说。

Linux下安装

因为我用的是deepin,所以再此就不演示了。首先电脑上已经安装好了node和npm了,如果没有安装的,后期需要npm包管理工具,如果还没有安装的,可以自己百度进行安装。

首先查看一下node和npm的版本,两个版本不能相差太大,如果相差太大可能在后期安装vue的时候会有一些不可预知的错误。

npm -v:查看npm版本

node -v:查看node版本

lishanlei@lishanlei-pc:~$ npm -v
5.3.0
lishanlei@lishanlei-pc:~$ node -v
v8.4.0

  

注意,win下和linux下其最新版本可能不同,不必纠结于这些。

升级npm到最新版本:

npm install -g npm

如果想gengxin到指定版本:

npm -g install npm@2.9.1  //后面的是版本。

升级node版本:

清除npm cache:

sudo npm cache clean -f  

安装n模块:

sudo npm install -g n  

指定升级到受欢迎的版本:

sudo n 0.8.

当然,你也可以升级到最新版本:

sudo n stable  

OK,查看当前版本是否升级成功。

成功之后我们开始安装vue

在安装时用到npm包管理工具,但是npm是外国的,老牛拉破车一般的速度,建议使用淘宝镜像用cnpm替换npm,特别简单:

npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就将本地的npm替换成了cnpm,如果想了解更过,可以访问npm.taobao.org,在此不做叙述。
安装vue:
cnpm install vue
安装完后查看vue是否安装:
lishanlei@lishanlei-pc:~$ vue

Usage: vue <command> [options]

Options:

-V, --version output the version number
-h, --help output usage information Commands: init generate a new project from a template
list list available official templates
build prototype a new project
help [cmd] display help for [cmd]

OK,安装成功,下来安装vue的管理工具vue-cli:

cnpm install --global vue-cli

好了,安装成功,过程可能有点长,耐心等待。

下来我们就可以创建一个基于 webpack 模板的新项目了:

vue init webpack my-project

my-project是你的项目名称,在安装过程中有很多选项,根据自己的需求进行选择。

进入新项目:

cd my-project

安装依赖,走你:

npm install

好了,现在依赖已经安装成功了,可以启动你的项目了:

npm run dev

=============================================================================================================================

windows下的安装

windows下的安装和linux下安装差不多,只是在创建新的项目的时候命令不同:

vue init webpack my-project

webpack是模板名称,my-project是你的项目名称。

好了,现在已经可以磨刀霍霍向你的项目了!

vue-cli安装的更多相关文章

  1. Vue技术点整理-Vue CLI安装详解

     一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...

  2. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  3. Vue CLI安装报错 npm ERR! Exit handler never called!

    安装Vue CLI时报错: npm install –g vue-cli 试了四种办法 1.把全局安装-g放到后面 npm install @vue/cli –g 2.命令行输入 npm 缓存清理命令 ...

  4. vue cli 安装element-ui

    1.安装elment-ui --save 参数:上线打包 MacBookPro:vue_test zhangxm$ npm install element-ui axios --save npm WA ...

  5. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  6. vue工具 - vue/cli@3.xx 安装使用流程

    mac安装记得npm前边加sudo 安装脚手架,用于生成目录 npm install -g @vue/cli 安装用于编译单个的.vue文件 npm install -g @vue/cli-servi ...

  7. ubuntu下安装vue/cli提示No command 'vue' found

    通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...

  8. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  9. Vue技术点整理-Vue CLI

    Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架 注:具体安装步骤可参考Vue CLI,默认安装的脚手架,是没有service.util等工具类的,以下主要描述如何在脚手架的基础上进 ...

  10. vue的安装配置与项目创建

    1,安装vue必须先安装node.js.  --------去官网安装node.js 因为npm依赖node.js环境,使用npm的时候需要安装node.js.安装node.js的时候npm会默认安装 ...

随机推荐

  1. unslider插件的使用

    深入理解unslider.js源码 最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. u ...

  2. href="#" 的坑

    第一次发博客, 也不讲究样式. 只是单纯的说一下踩过的坑,方便后人避坑吧 之前做项目的时候,碰到一个非常奇葩的问题. 就是在jqgrid中写了了一个简单的方法 {name:'已经存在的列名称', la ...

  3. App的前后台数据同步

    前言 在开发一个点餐软件时,app的订单数据是使用本地Sqlite数据库,在提交订单数据后,当订单数据在后台(Mysql数据库)发生变化时(如:已买单),本地数据如何改变呢? 思路 前台在查询时,将后 ...

  4. 合格的IT人士需要养成的习惯:设置系统还原点

    系统还原可帮助您将计算机的系统文件及时还原到早期的还原点.此方法可以在不影响个人文件(比如电子邮件.文档.照片等)的情况下,撤销对计算机的系统更改.有时,安装一个程序或驱动程序会导致对计算机的异常更改 ...

  5. 剖析Elasticsearch集群系列第一篇 Elasticsearch的存储模型和读写操作

    剖析Elasticsearch集群系列涵盖了当今最流行的分布式搜索引擎Elasticsearch的底层架构和原型实例. 本文是这个系列的第一篇,在本文中,我们将讨论的Elasticsearch的底层存 ...

  6. 还原数据库“XXX”时失败。System.Data.SqlClient.SqlError: 无法执行 BACKUP LOG,因为当前没有数据库备份。

    标题: Microsoft SQL Server Management Studio------------------------------ 还原数据库“GoldBellXZDepot”时失败. ...

  7. 从源码的角度看Service是如何启动的

    欢迎访问我的个人博客 ,原文链接:http://wensibo.top/2017/07/16/service/ ,未经允许不得转载! 七月中旬了,大家的实习有着落了吗?秋招又准备的怎么样了呢?我依旧在 ...

  8. MFC常见问题以及解决方法(2)_Cstring和string互相转换

    MFC默认编码是unicode(自己改成多字符集是不行的),对话框中对字符串的处理都是宽字符,而且添加变量会默认是CString类型,当你代码中想用string但又遇到必须转为CString的情况,就 ...

  9. 关于delete使用limit的一些注意事项

    在使用delete删除记录时,如果表里面存在多条相同的记录,但是此刻你只想删除一条记录,那么limit就派上了用场.但是使用limit的时候得注意: 如图,您如果想着删除第一个名字叫做张三的,如果你这 ...

  10. 使用Lucene.net+盘古分词实现搜索查询

    这里我的的Demo的逻辑是这样的:首先我基本的数据是储存在Sql数据库中,然后我把我的必需的数据推送到MongoDB中,这样再去利用Lucene.net+盘古创建索引:其中为什么要这样把数据推送到Mo ...