webpack-vue.js环境

安装webpack

在安装webpack之前,本地需要先配置node.js环境

由于npm安装速度慢,首先安装淘宝镜像cnpm

//命令行
npm install cnpm -g

使用cnpm安装webpack

//命令行
cnpm install webpack -g

-g代表全局

安装webpack完成 

注意:

vue.js不支持IE8及其以下版本,因为vue.js使用了IE8不能模拟的ECMAScript5特性。vue.js支持所有兼容ECMAScript5的浏览器.

安装vue.js

//命令行
cnpm install vue-cli -g

创建一个基于webpack的项目

//命令行
vue init webpack my-project

项目信息

进入项目

//命令行
cd my-project

安装依赖

//命令行
cnpm install

运行项目

//命令行
cnpm run dev

vscode打开项目

项目结构

访问地址

打开地址的样子

时间: 2024-08-25 12:42:18

webpack-vue.js环境的相关文章

【前端】vue.js环境配置以及实例运行简明教程

vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue.js开发环境搭建 VUE.JS简介 何为Vue.js Vue.js(读音 /vju?/, 类似于 view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue

vue.js环境搭建

vue最开始说是库,现在应该可以说是框架了,很多大公司都开始用vue了,这得源于vue的本质 1:数据化驱动,2:组件化模板.项目中用vue都得搭建环境,经过一段时间的摧残后终于有勇气来写篇关于vue环境搭建的博文了,我相信网上已经有很多前辈的博文能够帮助大家完成搭建,与我来说只是记录下自己搭建环境的一点心得,如若能够帮助到两三人,足以. 1:因为vue.js的运行是基于node.js的npm环境下,所以我们得先安装node.js,这个就不累赘了,网上下个node.js安装即可. 2:记得刚开始

Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?

现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echarts' 然后编译的时候加上了Uglify选项,发现vendor文件的大小已经达到了800多k,导致首次加载速度比较慢,然后我们这个是webapp,就更慢了. 所以考虑把echarts提取出来,改用cdn版本的echarts,具体操作步骤如下: (0)找到可用的echartscdn资源 在bootcdn

webpack+vue开发环境搭建

前提: 1.安装必要工具(node等); 2.安装全局vue-cli脚手架(快速搭建vue开发模板) 命令:npm install -g vue-cli 3.安装webpack 命令:npm install webpack -g (有问题可以使用npm install --save-dev webpack-cli -g命令) 4.运行命令: vue init webpack 项目名 注:回车后可能显示 Command vue init requires a global addon to be

vue.js环境搭建踩坑记

1. JS 包安装工具的选择npm or yarn 刚开始进行环境搭建的时候,用的是npm包管理工具,但是运行命令 npm run dev,启动项目总是报错,百度说是webpack和webpack-dev-server版本不兼容问题 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好 但是在用npm update命令后,webpack和webpack-dev-server版本会自动升级,,后面看到了用yarn, 具体步骤可参考:https://blog.csd

vue.js环境在window和linux安装

一.windows环境下安装vue 1.node.js安装:在node.js的官网上下载node的安装包 https://nodejs.org/en/download/ 安装完毕之后,在命令行下验证是否安装成功:输入npm,显示如下就表示安装成功. 2.cnpm的安装: npm install -g cnpm --registry=https://registry.npm.taobao.org 3.vue-cli的安装: cnpm install -g vue-cli 安装完后,检查是否安装成功

搭建vue.js环境

第一步:安装node.js. · 1.在f盘上新建文件夹node,jiang 2.百度node官网,下载node.js 3.点击下载的node.js进行安装.安装地址选在F:\node\nodeResore 4.查看nodejs有没有安装好:cmd打开命令窗口,找到F:\node\nodeResore路径,输入path,此时能看到F:\node\nodeResore路径. 输入 node -v  能看到你安装的nodejs的版本号. 第二步:需要配置npm的全局模块的存放路径以及cache的路径

webpack配合vue.js实现完整的单页面demo

本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的服务器在国外,可能我们下载的过程会比较慢,所以建议用阿里的镜像cnpm安装,10分钟实时更新一次npm的镜像.具体的下载配置参考阿里的cnpm官网.本文章只是和大家探讨怎么利用webpack配合vue.js做一个单页面应用,具体关于vue里面的内容怎么写并不在本篇文章的介绍范围. 1. 定义我们de

vue.js单页面应用实例

一:npm的安装 由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功. 测试node的版本号:node -v 测试npm的版本号:npm -v 以上提示代表安装成功 二:vue.js环境搭建 1.首先安装淘宝的npm镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装vue.js环境::cnpm install -g vue-cli 3.测

新人成长之入门Vue.js指令介绍(一)

写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的非常简单,用起来也是非常的方便,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既有项目整合,足以应付任何规模的应用. 如果你之前已经习惯了用jQuery.JS操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你