前端 vue-cli+Webpack 项目开发环境配置、创建一个vue-demo
一、软件及命令:
(1)下载node.js 最新的LTS 版本,下载 msi格式的(直接点击安装即可)。
(2)命令1:npm install cnpm -g
命令2:cnpm install webpack -g
命令3:cnpm install vue-cli -g
二、安装过程(熟练者可以直接跳过安装过程,直接使用上述命令安装即可)
1、安装 node,首先去官网下载LTS(Long Term Support)长期支持版本,网址 https://nodejs.org/zh-cn/
下载完成后直接点击下一步安装即可,安装完毕后使用 进入 Dos ,使用 node -v 查看安装是否成功,看到版本号就证明已经安装成功,如下图。
2、全局安装淘宝镜像 cnmp (国内服务器下载快) -g (代表全局安装)
执行命令 npm install cnpm -g,等待安装完毕,如下图
npm install cnpm -g
3、全局安装webpack (一种打包工具)
执行命令 cnpm install webpack -g ,等待安装完毕,如下图
cnpm install webpack -g
4、 全局安装 vue-cli (vue 项目开发的工具,脚手架,一种别人搭好的架子,我们直接在上面开发我们的项目,打包发布就行了)
执行命令,cnpm install vue-cli -g,等待安装完毕,如下图
cnpm install vue-cli -g
至此,vue+webpack 的开发环境已经安装完毕。
5、还是做一个 demo 吧,万一有初学者看到这个帖子,也算给别人一个指点吧。
首先选择一个你要存放项目文件的目录,进入目录,在文件系统的地址栏输入cmd,点击回车。如下
(1)
(2)
(3)
(4)执行如下命令,创建项目,项目名称为 vue-demo (自定义的,随你喜欢)
vue init webpack vue-demo,等待安装完毕(快慢取决于你的网速,一般1-2分钟可以完毕),过程中会输入一些配置,也是随你喜欢的。如下图
图1安装前的配置, 图2 安装完成
至此脚手架工具已经把我们的项目初始化完毕,接下来我们来启动项目。
( 5)首先进入 项目目录,执行命令 cd vue-demo(你的项目名字) 如下图
(6)运行 cnpm install (这个命令是以后你创建任何的 vue-cli+webpack 项目首先要执行的)命令 安装项目依赖,如下图
(7) 执行cnpm run dev 运行项目,运行成功的截图如下。
(8) 浏览器 输入 http://localhost:8080 查看效果。此项目是 脚手架项目的示例,以后会持续更新 vue 项目开发的其他知识。
前端 vue-cli+Webpack 项目开发环境配置、创建一个vue-demo的更多相关文章
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
- Java(1)开发环境配置及第一个程序Hello World
作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201468.html 博客主页:https://www.cnblogs.com/testero ...
- vue 的准备项目架构环境配置
一.环境搭建 中国镜像 composer config repo.packagist composer https://packagist.phpcomposer.com 命令 composer in ...
- Laravel 项目开发环境配置
1.首先安装Laravel 依赖管理包工具 Composer (前提是本地装好了PHP php -v) php -r "copy('https://install.phpcomposer. ...
- VUE开发--环境配置(一)(转)
无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627 https://www.jianshu.com/p/a494417def99?utm_so ...
- 快速创建一个vue项目
vue脚手架 用来创建vue项目的工具包 创建项目: npm install -g vue-cli vue init webpack VueDemo 开发环境运行: cd VueDemo npm in ...
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...
- vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
随机推荐
- asyncio异步编程【含视频教程】
不知道你是否发现,身边聊异步的人越来越多了,比如:FastAPI.Tornado.Sanic.Django 3.aiohttp等. 听说异步如何如何牛逼?性能如何吊炸天....但他到底是咋回事呢? 本 ...
- vue 之 slot插槽
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,父组件决定插槽显示或不显示以及怎样显示,子组件决定 ...
- Codeforces 1332 D. Walk on Matrix(构造矩阵)
怎么构造呢? \(首先我们不可能去构造一个2000*2000的矩阵,那太复杂了\) \(也许我们可以看看2*2的矩阵??\) \[\left[ \begin{matrix} x&y\\ z&a ...
- 组队训练 K K - The Stream of Corning 2
K - The Stream of Corning 2 这个题目不是很难,因为给你的这个S是单调递增的,所以就用优先队列+权值线段树就可以很快的解决了. 这个+读入挂可以优化,不过不用也没关系. #i ...
- vim基础快捷键
vim快捷键 1. 移动光标 快捷键 作用 h 光标向左移动一个字符 j 光标向下移动一个字符 k 光标向上移动一个字符 l 光标向右移动一个字符 6j 向下移动6个字符 Ctrl+f 屏幕向下移动一 ...
- 折腾了好久的vscode配置c/c++语言环境(Windows环境下)
最近有c语言相关的作业,但是突然再次拿起大一的时候那些c语言编辑器的时候,总觉得不智能,于是下了一个vscode,准备配一个c语言的环境 步骤如下: 1.vs官网下载好vscode,安装好以后再下载一 ...
- 消息队列高手课 -笔记-Kafka高性能的几个关键点
总结下kafka 高性能的几个关键点是: 1:使用批量处理的方式 去提升系统的吞吐能力 2:基于磁盘文件高性能的顺序读写的特性来设计存储结构 3:利用操作系统的PageCache 来缓存数据 减少I ...
- Linux 通过终端命令行切换系统语言
通过命令的形式修改系统的语言,比较详细的讲解了来龙去脉: 文章目录 0 前言 1 locale 文件 2 查找相关文件 3 解决方案 4 相关信息 4.1 locale属性的含义 4.2 LANGUA ...
- Properties集合与IO流
package com.itheima.demo07.Prop; import java.io.FileOutputStream; import java.io.FileReader; import ...
- springBoot整合Spring-Data-JPA, Redis Redis-Desktop-Manager2020 windows
源码地址:https://gitee.com/ytfs-dtx/SpringBoot Redis-Desktop-Manager2020地址: https://ytsf.lanzous.com/b01 ...