用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 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
Yii实现简单分页的方法
2016/04/29 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
centos下更新Python版本的步骤
2013/02/12 Python
python检查指定文件是否存在的方法
2015/07/06 Python
使用python实现接口的方法
2017/07/07 Python
python和shell获取文本内容的方法
2018/06/05 Python
python中嵌套函数的实操步骤
2019/02/27 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
爱情保证书范文
2014/02/01 职场文书
诚信考试倡议书
2014/04/15 职场文书
班主任先进事迹材料
2014/12/17 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python