用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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
微信小程序实用代码段(收藏版)
Dec 17 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
我的论坛源代码(十)
2006/10/09 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
python中的测试框架
2020/11/13 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
企业年会祝酒词
2015/08/11 职场文书
高三生物教学反思
2016/02/22 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python