用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 07 Javascript
js加强的经典分页实例
Mar 15 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 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
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
PHP7匿名类用法分析
2016/09/26 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
深入理解Python 代码优化详解
2014/10/27 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
电气自动化自荐信
2013/10/10 职场文书
策划助理岗位职责
2013/11/18 职场文书
运动会入场词200字
2014/02/15 职场文书
社团活动总结范文
2014/04/26 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
华清池导游词
2015/02/02 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
angular4实现带搜索的下拉框
2022/03/25 Javascript
Android存储中最基本的文件存储方式
2022/04/30 Java/Android
java版 联机五子棋游戏
2022/05/04 Java/Android