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


Posted in Javascript onSeptember 28, 2018

一、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/,输出结果如下所示:

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

注意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创建项目的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
详解适配器在JavaScript中的体现
Sep 28 #Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 #Javascript
Vue父子组件之间的通信实例详解
Sep 28 #Javascript
vue引入axios同源跨域问题
Sep 27 #Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 #Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 #Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 #Javascript
You might like
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
PHP面向对象法则
2012/02/23 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
js中的如何定位固定层的位置
2014/06/15 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
django使用xadmin的全局配置详解
2019/11/15 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
降低python版本的操作方法
2020/09/11 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
会计专业自我鉴定
2014/02/10 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
教师党员个人自我评价
2015/03/04 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技