用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 相关文章推荐
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
TypeScript入门-接口
2017/03/30 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
python多线程编程方式分析示例详解
2013/12/06 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
python statsmodel的使用
2020/12/21 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
冰淇淋店创业计划书范文
2013/12/27 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang