用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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
详解TypeScript的基础类型
Feb 18 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
python中随机函数random用法实例
2015/04/30 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Python中格式化字符串的四种实现
2020/05/26 Python
python安装后的目录在哪里
2020/06/21 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
某同学的自我鉴定范文
2013/12/26 职场文书
十八大感想感言
2014/02/10 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL