近期梳理了一下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. tp框架-----Model模型层

    1.Model模型层是用来做什么的呢? 主要是用来做操作数据库访问的.也就说明TP框架自带了一种访问数据库的方式,使用的是Model模型. 2.Model模型怎样使用呢? 要使用Model模型层访问数 ...

  2. Chrome浏览器扩展开发系列之十九:扩展开发示例

    翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深 ...

  3. C# 哈希表(Hashtable)用法笔记

    一.什么是Hashtable? Hashtable 类代表了一系列基于键的哈希代码组织起来的键/值对.它使用键来访问集合中的元素. 当您使用键访问元素时,则使用哈希表,而且您可以识别一个有用的键值.哈 ...

  4. [NOIP2013/Codevs3287]货车运输-最小[大]生成树-树上倍增

    Problem 树上倍增 题目大意 给出一个图,给出若干个点对u,v,求u,v的一条路径,该路径上最小的边权值最大. Solution 看到这个题第一反应是图论.. 然而,任意路径最小的边权值最大,如 ...

  5. 使用java语言编写窗口按钮

    使用java语言编写窗口按钮 代码如下: package Day08; import java.awt.FlowLayout; import javax.swing.JButton;import ja ...

  6. 解决React Native unable to load script from assets index.android.bundle on windows

    React Native运行的时候,经常碰到React Native unable to load script from assets index.android.bundle on windows ...

  7. 操作系统,银行家算法模拟实现(Windows 环境 C++)

    计算机操作系统课设需要,写了两个下午的银行家算法(陷在bug里出不来耽误了很多时间),参考计算机操作系统(汤子瀛) 实现过程中不涉及难度较大的算法,仅根据银行家算法的思想和步骤进行实现.以下为详细步骤 ...

  8. 处理SFTP服务器上已离职用户,设置为登录禁用状态

    测试用户禁用SQL select Enabled,LoginID from suusers where LoginID = 'yangwl' update suusers set Enabled=1 ...

  9. Angular02 将数据添加到组件中

    准备:已经搭建好angular-cli环境.知道如何创建组件 一.将一个数据添加到组件中 1 创建一个新的组件 user-item 2 将组件添加到静态模板中 3 为组件添加属性,并利用构造器赋值 4 ...

  10. web项目-easyui-datagrid使用汇总

    一,引言 工作的需要,做了3年的wpf--,又因为项目的需求,回归到web的开发. ■  3 years ago,vue是我三年前没用过的玩意儿. ■  3 years ago,bootstrap组件 ...