一、软件及命令:

(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的更多相关文章

  1. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

  2. Java(1)开发环境配置及第一个程序Hello World

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201468.html 博客主页:https://www.cnblogs.com/testero ...

  3. vue 的准备项目架构环境配置

    一.环境搭建 中国镜像 composer config repo.packagist composer https://packagist.phpcomposer.com 命令 composer in ...

  4. Laravel 项目开发环境配置

    1.首先安装Laravel 依赖管理包工具 Composer (前提是本地装好了PHP  php -v) php -r "copy('https://install.phpcomposer. ...

  5. VUE开发--环境配置(一)(转)

    无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627        https://www.jianshu.com/p/a494417def99?utm_so ...

  6. 快速创建一个vue项目

    vue脚手架 用来创建vue项目的工具包 创建项目: npm install -g vue-cli vue init webpack VueDemo 开发环境运行: cd VueDemo npm in ...

  7. VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

    转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...

  8. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  9. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

随机推荐

  1. asyncio异步编程【含视频教程】

    不知道你是否发现,身边聊异步的人越来越多了,比如:FastAPI.Tornado.Sanic.Django 3.aiohttp等. 听说异步如何如何牛逼?性能如何吊炸天....但他到底是咋回事呢? 本 ...

  2. vue 之 slot插槽

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,父组件决定插槽显示或不显示以及怎样显示,子组件决定 ...

  3. Codeforces 1332 D. Walk on Matrix(构造矩阵)

    怎么构造呢? \(首先我们不可能去构造一个2000*2000的矩阵,那太复杂了\) \(也许我们可以看看2*2的矩阵??\) \[\left[ \begin{matrix} x&y\\ z&a ...

  4. 组队训练 K K - The Stream of Corning 2

    K - The Stream of Corning 2 这个题目不是很难,因为给你的这个S是单调递增的,所以就用优先队列+权值线段树就可以很快的解决了. 这个+读入挂可以优化,不过不用也没关系. #i ...

  5. vim基础快捷键

    vim快捷键 1. 移动光标 快捷键 作用 h 光标向左移动一个字符 j 光标向下移动一个字符 k 光标向上移动一个字符 l 光标向右移动一个字符 6j 向下移动6个字符 Ctrl+f 屏幕向下移动一 ...

  6. 折腾了好久的vscode配置c/c++语言环境(Windows环境下)

    最近有c语言相关的作业,但是突然再次拿起大一的时候那些c语言编辑器的时候,总觉得不智能,于是下了一个vscode,准备配一个c语言的环境 步骤如下: 1.vs官网下载好vscode,安装好以后再下载一 ...

  7. 消息队列高手课 -笔记-Kafka高性能的几个关键点

    总结下kafka 高性能的几个关键点是: 1:使用批量处理的方式 去提升系统的吞吐能力 2:基于磁盘文件高性能的顺序读写的特性来设计存储结构 3:利用操作系统的PageCache 来缓存数据  减少I ...

  8. Linux 通过终端命令行切换系统语言

    通过命令的形式修改系统的语言,比较详细的讲解了来龙去脉: 文章目录 0 前言 1 locale 文件 2 查找相关文件 3 解决方案 4 相关信息 4.1 locale属性的含义 4.2 LANGUA ...

  9. Properties集合与IO流

    package com.itheima.demo07.Prop; import java.io.FileOutputStream; import java.io.FileReader; import ...

  10. springBoot整合Spring-Data-JPA, Redis Redis-Desktop-Manager2020 windows

    源码地址:https://gitee.com/ytfs-dtx/SpringBoot Redis-Desktop-Manager2020地址: https://ytsf.lanzous.com/b01 ...