近期梳理了一下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. Python中字典和集合

    Python中字典和集合 映射类型: 表示一个任意对象的集合,且可以通过另一个几乎是任意键值的集合进行索引 与序列不同,映射是无序的,通过键进行索引 任何不可变对象都可用作字典的键,如字符串.数字.元 ...

  2. JS,HTML,CSS

    HTML定义了网页的内容 CSS定义了网页的布局 JavaScript定义了网页的行为

  3. [UWP]浅谈按钮设计

    一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不 ...

  4. Java 常用排序算法实现--快速排序、插入排序、选择、冒泡

      public class ArrayOperation {    //二分查找算法    public static int branchSearch(int[] array, int searc ...

  5. Servlet Filter 中init和destroy问题

    测试源码如下: package com.FilterTest.Filter; import java.io.IOException; import javax.servlet.Filter; impo ...

  6. 只有第三方控件pas代码生成控件

    如果他人的VCl控件只有pas代码,如何生成控件? 步骤:1.new Pakage(bpl ) 2.在Contains中Add VCl***.pas 3.再Complie ,Install 即可 XE ...

  7. 集合用法笔记-Map用法

    一.Map遍历 Map<String, String> map = new HashMap<String, String>(); map.put("1", ...

  8. JavaScript一个whenReady函数,监听及注册事件

    /** * 传递函数给whenReady(),当文档解析完成且为操作准备就绪时, * 函数将作为文档对象的方法调用 * DOMContentLoaded.readystatechange或load事件 ...

  9. 如何禁用 .net reflector

    在 工具--->扩展管理器-->禁用

  10. 原生js简单实现双向数据绑定原理

    根据对象的访问器属性去监听对象属性的变化,访问器属性不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. 访问器属性的"值"比较特殊,读取或设置访问器 ...