用npm安装vue和vue-cli,并使用webpack创建项目的方法

一、npm 版本需要大于 3.0，如果低于此版本需要升级它：

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g

二、在用 Vue.js 构建大型应用时推荐使用 NPM 安装：

# 最新稳定版
$ cnpm install vue

三、Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

 vue-cli · Generated "my-project".

 To get started:

 cd my-project
 npm install
 npm run dev

 Documentation can be found at https://vuejs-templates.github.io/webpack

四、进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

注意1：Vue.js 不支持 IE8 及其以下 IE 版本。

注意2：要想在本地浏览页面效果，npm必须运行。如果已经关闭，按照以上第四步指令再次进入即可；

注意3：如果想在服务器端运行网页，先在npm中将网站打包，打包命令 npm run build;

注意4：想在npm执行打包命令，要先“ctrl+c”终止npm正在运行的批处理操作；

注意5：想在某一个盘中创建一个项目并按照脚手架，如：在E盘中创建一个“myFirstVue”项目

方法1： 进入E盘的“myfirstVue”文件夹，按住“shift+右键”， 打开管理员窗口

方法2：“win+R”输入“cmd”进入管理员窗口，输入“E：”进入E盘，再输入“cd myFirstVue”进入myFirstVue文件

以上这篇用npm安装vue和vue-cli,并使用webpack创建项目的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue学习笔记进阶篇之vue-cli安装及介绍

    Vue学习笔记进阶篇之vue-cli安装及介绍

    介绍 Vue-cli是Vue的脚手架工具 主要作用:目录结构.本地调试.代码部署.热加载.单元测试 地址:https://github.com/vuejs/vue-cli 安装 全局安装vue-cli npm install -g vue-cli 当然了,要想使用npm工具,就必须安装Node.js,node.js的安装方法这里就不做介绍了. 安装完成后,在终端输入以下命令, 可以查看vue的版本:vue -V 输入以下命令,可以查看官方提供的模板: vue list 我们可以看到,vue官方提

  • 安装vue-cli报错 -4058 的解决方法

    安装vue-cli报错 -4058 的解决方法

    本人在安装vue脚手架时报这样的错,我访问了漫山遍野还是没找到答案,有人叫我用cnpm安装,但是cnpm安装的vue有好多坑在里面: npm WARN checkPermissions Missing write access to C:\Users\liuyg\AppData\Roaming\npm\node_modules\vue-cli\node_modules\cliui\node_modules\wordwrap npm ERR! path C:\Users\liuyg\AppData

  • 详解使用nodeJs安装Vue-cli

    详解使用nodeJs安装Vue-cli

    前提:nodeJs本地已安装. 1.执行npm install --global vue-cli ,全局安装vue-cli ----因为默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器. 产生通过config命令设置默认下载路径: npm config set registry https://registry.npm.taobao.org 然后再执行: npm install --global vue-cli 2.安装后,检查是否安装成功 vue -V (在此注意V为大写) 3.使用v

  • vue-cli安装使用流程步骤详解

    1.全局安装vue-cli cnpm i vue-cli -g 2.监测安装版本 vue -V 大写V : version 3.指定目录下新建项目 vue init webpack [项目名] 按自己的意愿配置.选择对应信息.最后配置完成检查package.json是否如此 4.进入到项目 cd demo 5.安装全部依赖(或者在init是选择自动安装) cnpm i 6.安装你需要但是默认没被安装的(比如axios) cnpm i --S vuex axios (上图忘了cd到对应目录,自己安

  • windows下vue-cli及webpack搭建安装环境

    windows下vue-cli及webpack搭建安装环境

    1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm

  • 用npm安装vue和vue-cli,并使用webpack创建项目的方法

    一.npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g 二.在用 Vue.js 构建大型应用时推荐使用 NPM 安装: # 最新稳定版 $ cnpm install vue 三.Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用. # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ v

  • vue按需加载组件webpack require.ensure的方法

    vue-cli是由vue官方发布的快速构建vue单页面的脚手架. 使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/c

  • Vue Cli3 创建项目的方法步骤

    Vue Cli3 创建项目的方法步骤

    最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 1. 安装 npm install -g @vue/cli 2. 创建一个项目 vue create iview-admin # OR vue ui default (babel, eslint) 默认套餐,提供 babel 和 eslint 支持. Manually select features 自己去选择需要的功能,提供更多的特性选择.比如如果想要支持 Ty

  • node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法

    在使用npm install安装扩展插件时,系统提示"npm install Error: ENOENT, stat 'C:Users<用户名>AppDataRoamingnpm'". 以前都是很顺利的安装过程,没出现这种情况.我这里的解决办法是直接创建上面提示的目录就好了,应该是node.js权限不够,在此备注. 有时候就是这样,很可能一个很久都无法解决的问题,实际解决方法很简单,就是这么任性!!

  • Vue使用vue-cli创建项目

    Vue使用vue-cli创建项目

    本文介绍了Vue使用vue-cli创建项目,分享给大家,具体如下: vue-cli 是一个官方发布vueJS项目脚手架:https://github.com/vuejs/vue-cli 我创建的模板项目:https://github.com/Aleczhang1992/my-vue-project/tree/dev 一.步骤 1.要求已安装Node.js (>=4.x, 6.x preferred) and Git. 可以设置cnpm可以提升依赖包下载速度: npm install -g cnp

  • vue.js中npm安装教程图解

    首先理清nodejs和npm的关系: node.js是javascript的一种运行环境,是对Google V8引擎进行的封装.是一个服务器端的javascript的解释器. 包含关系,nodejs中含有npm,比如说你安装好nodejs,你打开cmd输入npm -v会发现出啊线npm的版本号,说明npm已经安装好. 引用大神的总结: 其实npm是nodejs的包管理器(package manager).我们在Node.js上开发时,会用到很多别人已经写好的javascript代码,如果每当我们

  • 使用命令行工具npm新创建一个vue项目的方法

    Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程. 只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project $ vue init webpack test //输入命令 ? Project

  • 使用Vue CLI创建typescript项目的方法

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"

  • 从零开始在NPM上发布一个Vue组件的方法步骤

    从零开始在NPM上发布一个Vue组件的方法步骤

    TL;DR 本文细致讲解了在NPM上发布一个Vue组件的全过程,包括创建项目.编写组件.打包和发布四个环节. 创建项目 这里我们直接利用@vue/cli来生成项目.如果没有安装@vue/cli的话,可以使用以下方法进行安装: # 如果喜欢npm npm i -g @vue/cli # 如果喜欢yarn yarn global add @vue/cli 此外,如果安装了npx(高版本的nodejs发行版会自带这一工具)的话,还可以很方便地通过npx vue这一方式实现免安装使用. 接下来就可以创建

  • vue3.0 CLI - 1 - npm 安装与初始化的入门教程

    node 开发环境请先自行准备 npm install -g @vue/cli 安装完成之后命令行则存在 vue 命令 vue -V 查看本地 vue 版本 vue -h 输出帮助 vue create <project-name> 进入工程文件夹,创建项目. 如:cd studyVue ( 进入工程文件夹 ) vue create config ( 创建 config 项目 ) 选择 default 配置项,下面没什么可介绍的,自行尝试. 下面介绍选择 manually select fea

随机推荐