vue和webpack安装命令详解

一、安装vue相关命令

1、安装vue

cnpm install vue 

2、安装vue-cli

cnpm install -g vue-cli 

3、查看vue安装版本

vue -V 

二、安装webpack

1、安装webpack

cnpm install -g webpack 

2、安装webpack-dev-server

cnpm install -g webpack-dev-server 

3、查看webpack版本

webpack -v 

总结

以上所述是小编给大家介绍的vue和webpack安装命令详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此

  • 一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）

    Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api. 本文将详细介绍关于利用webpack搭一个vue脚手架的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.适用人群 1.对webpack知识有一定了解但不熟悉的同学. 2.女同学!!!(233333....) 二.目

  • vue+node+webpack环境搭建教程

    vue+node+webpack环境搭建教程

    一.环境搭建 1.1.去官网安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html ) 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错.推荐最新版本. 下载安装包之后直接点击安装即可.测试安装成功的界面如下: 1.2.利用npm安装webpack命令行语句为npm install webpack -g.测试安装成功的界面如下: 1.3.下面就是安装淘宝镜像,如下图

  • 详解vue-cli之webpack3构建全面提速优化

    前言 伴随着vue的全球化,已经各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情 在这其中,相信很多人都会选择官方的vue-cli初始化工程模板,然后通过引入第三方组件框架和工具的方式进行开发构建,我个人也十分推崇这种做法.但是vue-cli初始化的项目模板毕竟是面向所有开发者的,在兼容性方面会有一定妥协.相信很多人都已经搜索过各类的webpack构建优化文章,但是很多不是版本太老

  • vue+vuecli+webpack中使用mockjs模拟后端数据的示例

    vue+vuecli+webpack中使用mockjs模拟后端数据的示例

    前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTML模板生成模拟数据. 拦截并模拟 ajax 请求. 语法规范 Mock.js 的语法规范包括两部分: 1.数据模板定义规范(Data Template Definition,DTD) 2.数据占位符定义规范(Data Placeholder Definition,DPD) 数据模板定义规范 DTD

  • webpack+vue中使用别名路径引用静态图片地址

    webpack 的别名好处大家也都了解, 但是 vue 的模板中, 对图片地址使用别名时总出现问题, 很久时间的时间都没找到解决办法, 一度认为是 webpack 的原因... alias: { 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components')

  • webpack搭建vue 项目的步骤

    webpack搭建vue 项目的步骤

    前期准备 webpack vue.js npm nodejs ES6语法 由于本文内容是通过npm来加载vue,所以开始之前需安装nodejs环境,安装完成之后再执行以下步骤: 创建项目 mkdir vue-demo cd vue-demo 使用 npm init 命令 生成package.json文件 npm init 大概生成的package.json 如下: { "name": "vue-demo", "version": "1.

  • Vue工程模板文件 webpack打包配置方法

    1.github github地址:https://github.com/MengFangui/VueProjectTemplate 2.webpack配置 (1)基础配置webpack.base.config.js const path = require('path'); //处理共用.通用的js const webpack = require('webpack'); //css单独打包 const ExtractTextPlugin = require('extract-text-webp

  • 详解最新vue-cli 2.9.1的webpack存在问题

    详解最新vue-cli 2.9.1的webpack存在问题

    最近vue-cli更新,用其构建项目的时候,发现bulid文件下少了两个文件,分别是dev-sever.js和dev-client.js vue-cli 2.8 vue-cli 2.9.1 这是为什么呢 我们查看下package.json vue-cli 2.8 vue-cli 2.9.1 由此可知 在最新版本的vue-cli中webpack版本更新到v3.6.0了. 既然更新了 那就我们就重新开下webpack的配置项. vue自启浏览器设置 当我们启动npm run dev执行此cli的时候

  • vue和webpack安装命令详解

    一.安装vue相关命令 1.安装vue cnpm install vue  2.安装vue-cli cnpm install -g vue-cli  3.查看vue安装版本 vue -V  二.安装webpack 1.安装webpack cnpm install -g webpack  2.安装webpack-dev-server cnpm install -g webpack-dev-server  3.查看webpack版本 webpack -v  总结 以上所述是小编给大家介绍的vue和w

  • 基于Debian的linux系统软件安装命令详解 (推荐)

    Debian简介 广义的Debian是指一个致力于创建自由操作系统的合作组织及其作品,由于Debian项目众多内核分支中以Linux宏内核为主,而且 Debian开发者 所创建的操作系统中绝大部分基础工具来自于GNU工程 ,因此 "Debian" 常指Debian GNU/Linux. 非官方内核分支还有只支持x86的Debian GNU/Hurd(Hurd微内核),只支持amd64的Dyson(OpenSolaris混合内核)等.这些非官方分支都存在一些严重的问题,没有实用性,比如H

  • Vue中webpack的使用详解

    目录 1.什么是Webpack 2.模块化的演进 AMD CMD ES6模块 3.安装Webpack 4.使用webpack 总结 1.什么是Webpack 本质上, webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) .当webpack处理应用程序时, 它会递归地构建一个依赖关系图(dependency graph) , 其中包含应用程序需要的每个模块, 然后将所有这些模块打包成一个或多个bundle. Webpack是当下最热门的前端资源模块

  • centos7.2下安装mysql5.7数据库的命令详解

    服务器上的mysql安装了一个8.0.12版本的,本地的是一个5.7版本的,今天删除了重新安装的5.7版本的,下面是所有的名命令 跟着走就会安装上了. 配置源 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm yum localinstall mysql57-community-release-el7-8.noarch.rpm # yum repolist enabled | grep "mysql.

  • python flask安装和命令详解

    Flask Web开发实战学习笔记 Flask简介 Flask是使用Python编写的Web微框架.Web框架可以让我们不用关 心底层的请求响应处理,更方便高效地编写Web程序.因为Flask核心简 单且易于扩展,所以被称作微框架(micro framework).Flask有两个主 要依赖,一个是WSGI(Web Server Gateway Interface,Web服务器网关 接口)工具集--Werkzeug(http://werkzeug.pocoo.org/),另一个是 Jinja2模

  • 使用nvm安装|更新|切换|nodejs的命令详解

    目录 简介 一.常用的nvm命令 安装所对应的版本. 切换到安装的版本 nvm命令行操作命令 简介 nvm(全名node.js version management)是一个node(的版本管理工具,,与npm不同的是,npm是依赖包的管理工具 其主要解决不同项目所需node.js版本不一致时管理的麻烦,就比如弄hexo主题,不同的主题需要的nodejs版本不一致,没有这来管理,就要安装卸载nodejs安装对应的版本 有了nvm就可以简单操作node版本的切换.安装.查看等. 一.常用的nvm命令

  • 利用Vue-cli搭建Vue项目框架的教程详解

    首先安装node.js 1.在新建的目录中按住shift 鼠标右键,在此处打开命令窗口,版本保证在4.x以上 node -v 2.全局安装vue脚手架 npm install -g vue-cli 同时可以使用vue和vue list 命令查看 3.初始化模板配置和项目名字 vue init webpack mycharts mycharts是项目名 其中有许多需要选择的选项,eslint适合团队开发,规范代码之类的,个人开发我喜欢用stylus,所以这个选项我不会选n,其他Y 4.有提示就按e

  • vue项目中axios使用详解

    vue项目中axios使用详解

    axios在项目中(vue)的使用 没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~ 如果开发遇到跨域问题可以参考:http://www.jb51.net/article/134571.htm 安装axios到项目中 npm install axios --save 配置wepack别名,不同环境访问不同的配置接口 配置: 使用:import config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例

  • vue 插件的方法代码详解

    在开发项目的时候,我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置.但是官方 cli3 现在并不支持搭建 plugin 开发的项目. 还好,已经有大神(Kazupon)走在了我们前面,我们就用现成的vue-cli-plugin-p11n. 如果你没有安装 vue-cli,请先安装 npm i -g @vue/cli 首先,搭建项目 vue create [your plugin name] && cd [your plugin name] vue

  • 通过GASP让vue实现动态效果实例代码详解

    通过GASP让vue实现动态效果实例代码详解

    单页应用及支持它们的前端框架提供了一个很好的机会,可以为程序设计提供令人惊叹的交互层,本文,我们将了解 vue.js 及如何集成 GASP 动画库来添加令人惊叹的动画效果. Vue.js 是一个功能强大且易掌握的 JS 框架,在 Vue CLI 的帮助下,我们能够快速构建具有所有最新 Webpack 功能的应用程序,而无需花费时间来配置 webpack,只需安装 Vue CLI,在重大上输入:create <project-name>,您就可以发车了. GASP是一个JavaScript动画库

随机推荐