用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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
初识Node.js
Sep 03 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
原生js实现随机点名
Jul 05 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 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中文字符截取防乱码
2008/03/28 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
Python温度转换实例分析
2018/01/17 Python
python实现猜数字小游戏
2020/03/24 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
法律专业推荐信范文
2013/11/29 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
单位证明范文
2015/06/18 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
Pandas数据类型之category的用法
2021/06/28 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL