用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 DOM操作 基于命令改变页面
May 06 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
OpenLayer学习之自定义测量控件
Sep 28 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脚本的10个技巧(6)
2006/10/09 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python递归法实现简易连连看小游戏
2020/03/25 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
python 简单的调用有道翻译
2020/11/25 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
国贸专业个人求职信分享
2013/12/04 职场文书
上课迟到检讨书
2014/02/19 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
活动总结模板
2014/05/09 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python