用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_12_执行模型浅析
Oct 18 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
js微信分享实现代码
Oct 11 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
详解适配器在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速成大法
2015/01/30 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
PHP实现微信对账单处理
2018/10/01 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
python面向对象 反射原理解析
2019/08/12 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
上海期货面试题
2014/01/31 面试题
《翻越远方的大山》教学反思
2014/04/13 职场文书
商务经理岗位职责
2014/08/03 职场文书
二手车转让协议书
2015/01/29 职场文书
2015年清明节活动总结
2015/02/09 职场文书
个人先进事迹总结
2015/02/26 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
二年级作文之动物作文
2019/11/13 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python