用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 相关文章推荐
图片之间的切换
Jun 26 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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设计模式之观察者模式的应用详解
2013/05/21 PHP
PHP微信API接口类
2016/08/22 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
Web开发之JavaScript
2012/03/29 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
Pandas透视表(pivot_table)详解
2019/07/22 Python
python递归下载文件夹下所有文件
2019/08/31 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
python手写均值滤波
2020/02/19 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
父母教会我观后感
2015/06/17 职场文书
公司周年庆典致辞
2015/07/30 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android