用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 相关文章推荐
Node.js 制作实时多人游戏框架
Jan 08 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
JavaScript实现旋转木马轮播图
Mar 16 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实现mysql同步的实现方法
2009/10/21 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python实现静态服务器
2019/09/05 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
python 如何停止一个死循环的线程
2020/11/24 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
测绘工程系学生的自我评价
2013/11/30 职场文书
霸气队列口号
2014/06/18 职场文书
超市创意活动方案
2014/08/15 职场文书
踏青活动策划方案
2014/08/19 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
感恩主题班会教案
2015/08/12 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang