用npm安装vue和vue-cli,并使用webpack创建项目的方法

 更新时间:2018年09月28日 08:47:46   作者:FireBird_one  
今天小编就为大家分享一篇用npm安装vue和vue-cli,并使用webpack创建项目的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

一、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

注意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创建项目的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3 编译流程-源码解析

    Vue3 编译流程-源码解析

    今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥
    2021-09-09
  • 浅谈Vant-list 上拉加载及下拉刷新的问题

    浅谈Vant-list 上拉加载及下拉刷新的问题

    这篇文章主要介绍了浅谈Vant-list 上拉加载及下拉刷新的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue 封装 Adminlte3组件的实现

    vue 封装 Adminlte3组件的实现

    这篇文章主要介绍了vue 封装 Adminlte3组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue单元格多列合并的实现

    vue单元格多列合并的实现

    这篇文章主要介绍了vue单元格多列合并的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue设计一个倒计时秒杀的组件详解

    vue设计一个倒计时秒杀的组件详解

    这篇文章主要介绍了vue设计一个倒计时秒杀的组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue实现消息的无缝滚动效果的示例代码

    vue实现消息的无缝滚动效果的示例代码

    本篇文章主要介绍了vue实现消息的无缝滚动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 关于net 6+vue 插件axios 后端接收参数问题

    关于net 6+vue 插件axios 后端接收参数问题

    接到这样一个项目需求是这样的,前端vue 必须对象传递后端也必须对象接收,接下来通过本文给大家介绍下net 6+vue 插件axios 后端接收参数的问题,需要的朋友可以参考下
    2022-01-01
  • Vue.js 实现数据展示全部和收起功能

    Vue.js 实现数据展示全部和收起功能

    这篇文章主要介绍了Vue.js 实现数据展示全部和收起功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Element Plus组件Form表单Table表格二次封装的完整过程

    Element Plus组件Form表单Table表格二次封装的完整过程

    一般在后台管理系统的开发中,都会遇到很多table,但每一次都去引入el-table就会导致代码十分冗余,所以基于组件做一下二次封装成自己需要的组件就十分nice,下面这篇文章主要给大家介绍了关于Element Plus组件Form表单Table表格二次封装的相关资料,需要的朋友可以参考下
    2022-09-09
  • Vue项目前后端联调(使用proxyTable实现跨域方式)

    Vue项目前后端联调(使用proxyTable实现跨域方式)

    这篇文章主要介绍了Vue项目前后端联调(使用proxyTable实现跨域方式),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论