用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 相关文章推荐
jQuery 浮动广告实现代码
Dec 25 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 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
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php实现分页显示
2015/11/03 PHP
js 省地市级联选择
2010/02/07 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
Vue页面骨架屏注入方法
2018/05/13 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
原生js实现分页效果
2020/09/23 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
python+OpenCV实现图像拼接
2020/03/05 Python
利用python在excel中画图的实现方法
2020/03/17 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
学生爱国演讲稿
2014/01/14 职场文书
中考冲刺决心书
2014/03/11 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
2014年超市工作总结
2014/11/19 职场文书
2014年司法所工作总结
2014/11/22 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android