精华内容
下载资源
问答
  • npm安装vue

    千次阅读 多人点赞 2018-07-26 15:48:35
    npm安装vue by 铁乐猫 npm安装vue Vue.js 是什么 直接用script引入 安装vue 对不同构建版本的解释 安装命令行工具 (CLI) 安装cnpm 安装vue-cli 新建vue项目 运行服务 目录结构 Vue.js 是什么 Vue ...

    npm安装vue

    by 铁乐猫

    Vue.js 是什么

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    • 数据驱动视图

      • 数据驱动是vuejs最大的特点。
      • 在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom
    • 声明式渲染

      • Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

    直接用script引入

    直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。
    注:在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!

    安装vue

    在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpackBrowserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件

    # 最新稳定版
    $ npm install vue

    对不同构建版本的解释

    NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。
    这里列出了它们之间的差别:

    UMDCommonJSES Module
    完整版vue.jsvue.common.js
    只包含运行时版vue.runtime.jsvue.runtime.common.js
    完整版 (生产环境)vue.min.js-
    只包含运行时版 (生产环境)vue.runtime.min.js-

    安装命令行工具 (CLI)

    Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档

    安装cnpm

    在国内,使用淘宝的镜像会比较快安装一些包。

    我前面己经安装好了node.js和npm,上图是进入命令行,npm安装cnpm:

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org

    这样就可以使用 cnpm 命令来安装模块了:

    $ cnpm install [name]

    安装vue-cli

    vue-cli用于快速搭建大型单页应用,可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

    $ cnpm install --global vue-cli

    如上图,使用--global选项是因为这样可以在全局下使用vue-cli工具来创建vue项目,而不是要在特定的安装目录下才能使用vue-cli。

    $ vue -v查看版本验证安装成功与否

    因为vue命令去初始化项目的时候实际上还是使用的是npm去安装各种模块,并没有使用cnpm,所以还是先设置npm使用淘宝中的镜像比较快。

    新建vue项目

    新建一个项目文件夹,进入该文件夹后敲以下命令初始化一个vue项目
    vue init webpack 项目名称

    其中webpack为vue的其中一个模板。
    查看帮助得知,如果自己的github仓库上 己有模板也可指定github上的仓库来初始化项目:

    下图开始初始化一个vue项目,利用的就是vue-cli和webpack:
    vue init webpack my-project

    ? Project name vue-start //项目名称
    ? Project description A Vue.js project // 项目描述
    ? Author  // 作者名称
    ? Vue build standalone // 推荐选前者
    
    ? Install vue-router?  
    // 是否安装vue-router路由组件,也可不安装使用第三方或简单的项目自己写
    
    ? Use ESLint to lint your code? 
    // 是否使用eslint管理代码,个人项目不推荐
    
    ? Set up unti tests?
    // 是否使用karma来做单元测试
    
    ? Setup e2e tests with Nightwatch?
    // 是否安装e2e测试
    
    ? Should we run 'npm install' for you after the project has been created?
    // 选择使用npm或yarn进行安装模块

    一路填写所需信息后,回车执行,一段时间安装完模块等后初始化完成。

    没安装那几个模块,大小也去到100多M了,果然是要建立大型的项目时才去做vue-cli init 项目的事情比较好阿。平常的就直接使用vue.js好了。

    运行服务

    进入项目目录,按之前看到的提示,运行npm run dev命令进入开发:

    默认监听8080端口,服务器己经启动,目前是在开发环境下。

    访问默认的localhost:8080,出现的就是vue的欢迎页面如下,表示正常:

    退出监听,直接关闭cmd窗口即可。

    目录结构

    • build – 大部分是webpack的配置文件
    • config – 配置文件,比如配置监听端口
    • node_modules – 依赖包都在这里
    • src – 主工程文件夹,基本上所有的开发都在这个文件夹进行
    • static – 静态文件目录
    • package.json – 项目的一些配置信息

    【end】

    展开全文
  • windows下npm安装vue 前言 今天博主将为大家分享Vue系列: windows下npm安装vue,不喜勿喷,如有异议欢迎讨论! 有一个强大的地基才能写出健壮的程序! 使用之前,我们先来掌握3个东西是用来干什么的。 ...

    windows下npm安装vue


    前言

    今天博主将为大家分享Vue系列: windows下npm安装vue,不喜勿喷,如有异议欢迎讨论!

    有一个强大的地基才能写出健壮的程序!


    使用之前,我们先来掌握3个东西是用来干什么的。

    • npm: Nodejs下的包管理器。

    • webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

    • vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)

    开始:**

    首先进入nodejs的官网: https://nodejs.org/en/ 下载nodejs
    在这里插入图片描述
    如图,下载10.15.3 LTS (推荐给绝大部分用户使用)当然也有历史版本按需下载

    在这里插入图片描述

    安装(可以使用默认路径,本例子中自行修改为D:\nodejs)

    在这里插入图片描述无脑下一步安装完成

    在这里插入图片描述
    来看一下结构

    在这里插入图片描述打开cmd命令窗口(windows键+R快捷打开)

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    再看看另外2个目录,npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过,一使用缓存目录就生成了),我们试图把这2个目录移动回到D:\nodejs
    先如下图建立2个目录

    在这里插入图片描述然后运行以下2条命令

    • npm config set prefix “D:\nodejs\node_global”

    • npm config set cache “D:\nodejs\node_cache”

    我们可以看到目录发生了变化,看一下npm的本地仓库,输入命令npm list -global
    在这里插入图片描述输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

    在这里插入图片描述
    检查一下镜像站 npm config get registry

    在这里插入图片描述
    Npm info vue 看看能否获得vue的信息

    在这里插入图片描述npm install npm -g 安装npm

    在这里插入图片描述
    npm list -global 查看目录,就不是空啦

    在这里插入图片描述注意,此时,默认的模块D:\nodejs\node_modules 目录将会改变为D:\nodejs\node_global\node_modules 目录,如果直接运行npm install等命令会报错的。

    我们需要做一件事情:

    • 增加环境变量NODE_PATH 内容是:D:\nodejs\node_global\node_modules

    • (注意,以下操作需要重新打开CMD让上面的环境变量生效)

    • 测试NPM安装vue.js

    • 命令:npm install vue -g

    • 这里的-g是指安装到global全局目录去

    在这里插入图片描述
    在这里插入图片描述

    • 测试NPM安装vue-router

    • 命令:npm install vue-router -g

    在这里插入图片描述
    在这里插入图片描述

    • 运行npm install vue-cli -g安装vue脚手架

    在这里插入图片描述出现如下信息进行path配置

    在这里插入图片描述
    对path环境变量添加D:\nodejs\node_globalwin10以下版本的,横向显示PATH的,注意添加到最后时,不要有分号【;】,重新打开CMD,并且测试vue是否使用正常

    在这里插入图片描述注意,vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,他的配置并不全放在根目录下的 webpack.config.js 中。

    打开cmd切换到根目录这里是d:盘

    在这里插入图片描述
    初始化,安装依赖

    在这里插入图片描述
    运行npm install安装依赖

    在这里插入图片描述
    npm run dev

    在这里插入图片描述
    成功界面,提示打开地址http://localhost:8080

    在这里插入图片描述
    自动打开浏览器http://localhost:8080/#/

    • npm run build
    • 生成静态文件,打开dist文件夹下新生成的index.html文件

    nmp下新建出来的vue01的目录描述:

    在这里插入图片描述


    到这里Vue系列: windows下npm安装vue,分享完毕了!下一波将分享《Redis的下载安装》和SpringBoot-Jpa-Redis案例分享!


    最后

    • 更多参考精彩博文请看这里:《陈永佳的博客》

    • 喜欢博主的小伙伴可以加个关注、点个赞哦,持续更新嘿嘿!

    展开全文
  • npm 安装vue时报错

    千次阅读 2017-04-14 15:06:42
    npm安装vue报错

    在npm安装vue时报下列错误:


    npm ERR! Windows_NT 10.0.14393 npm

    ERR! argv "C:\\Program Files\\nodejs\\node.exe" 

    "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "vue" npm

    ERR! node v6.9.1 npm

    ERR! npm  v3.10.8 npm

    ERR! code ENOSELF  npm 

    ERR! Refusing to insta


    这种错误可以通过以管理员身份运行cmd命令窗口,

    win+R快捷打开方式不是通过管理员的身份运行的

    在菜单中查询command


    右键选择以管理员身份运行即可

    之后安装成功


    展开全文
  • npm 安装vue教程

    2019-10-31 10:28:31
    1.安装vue全局命令(如果安装失败先执行第二条命令执行完成再进行安装npm install -g vue-cli npm cache clean --force #安装失败执行当前命令 2.安装失败删除vue-cli文件重新安装 3.安装完成后运行vue如下...

    1.安装vue全局命令(如果安装失败先执行第二条命令执行完成再进行安装)

    npm install -g vue-cli
    npm cache clean --force #安装失败执行当前命令

    2.安装失败删除vue-cli文件重新安装

    3.安装完成后运行vue如下图所示则安装成功

    展开全文
  • 如何在mac上使用npm安装vue安装问题处理 本文主要介绍mac/linux下如何使用npm安装vue 一、安装nvm和node.js 见以前写的一篇文章:http://blog.csdn.net/YClimb/article/details/78793224 二、使用...
  • 使用NPM安装vue

    千次阅读 2019-03-05 16:30:45
    一、选择一个磁盘目录用来存放你项目路径。... 然后输入命令: ...1、npm install -g vue-cli //安装vue-cli 脚手架 2、npm init webpack myVue //myVue就是项目名字 中间这个需要根据显示内容分别...
  • npm安装 vue-cli安装

    2018-10-09 08:57:40
    一、使用之前,我们先来掌握3个东西是用来干什么的。 npm: Nodejs下的包管理器。...(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装) 开始: ...
  • npm安装vue教程

    2020-07-22 15:14:32
    (帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装) 开始: 如图,下载8.9.3 LTS (推荐给绝大部分用户使用) 双击安装 可以使用默认路径..
  • 这篇文章借鉴此博客 文章目录安装node.js安装cnpm安装vue-cli 脚手架构建工具(必须在全局中进行安装)创建项目 ...npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入 npm -v命令,.
  • npm 安装vue脚手架报错

    千次阅读 2020-03-11 14:53:49
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\@vue\cli\node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform ...
  • 2.安装vuenpm install -g vue-cli //-g表示全局安装vue-cli是模块,全局安装的模块可以在命令行直接使用  由于npm网站在国内速度非常慢,所以可以在命令后面加上淘宝的镜像 即:npm install -g ...
  • npm安装vue详细教程(图片详解)

    千次阅读 2018-11-22 13:50:00
    npm安装vue详细教程(图片详解) 一、总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存   1、什么情况下最适合用npm安装项目...
  • 使用 npm 安装 Vue CLI

    2019-12-25 15:15:32
    安装前首先理清nodejs和npm的关系: node.js是javascript的一种运行环境,是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。 包含关系,nodejs中含有npm,比如说你安装好nodejs,你打开cmd输入npm...
  • npm安装vue-cli失败

    千次阅读 2018-12-26 20:22:33
    加入sudo即可 命令:sudo npm install -g @vue/cli
  • npm安装vue-cli的时候报错了

    千次阅读 2019-06-05 11:37:53
    报错问题如下, 因为习惯了 vue-cli 2.x 所以卸载了 vue-cli 3.x,然后准备安装 vue-cli2.x的时候,不给我面子了 如图 然后赶紧百度, 找到了 解决方案 关键是这几条命令, 使用需谨慎 # 逐条试试 npm ls --depth 0...
  • NPM安装vue脚手架(完整版)

    千次阅读 2019-12-02 15:43:30
    npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题。比如常用的有:  1)允许用户从NPM服务器下载别人编写的第三方包到本地使用。  2)允许用户从NPM服务器下载并安装别人编写的命令行...
  • npm安装vue超时(ERR! errno ETIMEDOUT)

    千次阅读 2020-03-31 10:33:04
    输入下面这个命令安装完成之后,再接着安装就好了 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装完成后继续: D:\>npm install vue-cli -g npm WARN deprecated coffee-script@...
  • 使用npm安装vue脚手架cli时出错的解决方法 最近准备使用npm安装vue学习,通过观看vue的介绍,可以认为vue与最近流行的MVVM框架angular.js相似,后者学习曲线相对陡峭,所以在时间能力不足的情况下可以先学习...
  • 首先这两种方式都可以使用vue.js。 区别在于,使用npm安装Vue可以方便包管理。等到应用需要越来越多的前端库和前端框架的... 然后直接使用Vue命令,会使用webpack工具,创建项目,前端构建工具会让前端开发更加高效。
  • 一、npm 版本需要大于 3.0,如果低于此版本...二、在用 Vue.js 构建大型应用时推荐使用 NPM 安装: # 最新稳定版 $ cnpm install vue 三、Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。 #
  • 一、下载node.js ... 选择相应版本安装 下载完成后一路next安装完成。 ...一般环境变量会自动添加,打开命令行测试...使用下面命令安装淘宝镜像npm npm install -g cnpm --registry=https://registry.npm.taobao....
  • 1、千万别用cnpm安装 血的教训,总有莫名其妙的问题 2、安装出错如何清空 rm -rf node_modules rm package-lock.json yarn.lock ...## 1通过config命令(当前项目) npm config set registry https://...
  • 1 安装vue-cli, 配置vue命令环境 cnpm install vue-cli -g 2、初始化一个项目 名字为 yyt-vue-cli-demo 初始化项目有两种方式, Webpack 基于webpack,用的较多,包含eslint, unit等 Webpack...
  • 输入下面这个命令安装完成之后,再接着安装就好了 npm install -g cnpm --registry=https://registry.npm.taobao.org 效果如下: D:\&gt;npm install vue-cli -g npm WARN deprecated coffee-script@...
  • Deepin系统安装vue的小问题:npm全局安装成功但是vue命令不存在deepin系统好好用!首先安装node和npm然后通过npm安装vue deepin系统好好用! 首先安装node和npm 在官网上下载对应版本的文件,然后通过 ln -s A B ...
  • 学习使用vue-cli搭建项目,使用npm install -g vue-cli命令安装完成后,通过输入vue命令测试是否安装完成。结果提示:无法加载文件 C:\Users\yangx\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关...
  • 1.安装node 和 npm 这里使用的在官网下载 .tar.xz 包的方式, 如果是 gz的话还要编译,xz不用解压完就能用 可以去nodejs官网去查看最新版本的nodejs 网址如下:https://nodejs.org/en/download/current/ wget ...
  • 本地安装Vue 不使用全局安装,先创建一个目录,然后进入到该目录下,使用cnpm install vue安装: E:\WorkSpace\PhpStorm\myVue&gt;cnpm install vue √ Installed 1 packages √ Linked 0 latest versions √ ...
  • 我把命令改为全局安装npm install --global vue,就不报错了: 但是结果并没有安装成功: 我去查看了环境变量和npm安装的文件目录都没有问题,接着我又安装了脚手架vue-cli: 再输入vue监测是否安装成功,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,743
精华内容 21,097
关键字:

npm安装vue命令

vue 订阅