1.    安装node.js

官网下载安装:https://nodejs.org/en/

版本查看:node -v

注意:node版本最好新一点好,推荐6.0以上。

2.    npm安装webpack

a)     命令

npm install -g webpack //全局安装

npm install -g webpack-dev-server //安装调试工具

b)     Webpack安装权限问题

如果出现上图所示错误说明用户权限受限,使用管理员权限打开命令提示符(或node.js 命令提示符)

User用户身份打开node.js命令提示符窗口如下:

管理员身份打开node.js命令提示符窗口如下:

3.    npm安装vue-cli

c)     命令

npm install -g vue-cli //全局安装

4.    创建一个基于 webpack 模板的新项目

注:Vue.js官方基于提供的开发模板介绍见《Vue开发模板简介

4.1完全模式项目创建

创建项目目录D:\\vue_project

在项目目录下执行下列命令

vue init webpack project-name //默认安装2.0版本

vue init webpack#1.0 project-name //安装1.0版本

4.2简单模式项目创建

创建项目目录D:\\webpack-simple-demo

在项目目录下执行下列命令

vue init webpack-simple project-name //默认安装2.0版本

5.    项目目录

5.1完全模式项目目录

5.2简单模式项目目录

6.    安装项目依赖

一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。

npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

cnpm install

7.    启动项目

npm run dev

8.    发布

npm run build

a)     vue-simple-webpack

执行发布命令后,会生成发布时的build.js,并且是经过压缩的。

b)     vue-webpack

执行发布命令后,会将所有的静态资源(包括index.html)都生成到dist目录下。也就是说你可以直接拿着dist目录去发布应用,例如在IIS下将dist目录发布为一个网站。

环境搭建:Vue环境搭建和项目初始化(windows)的更多相关文章

  1. 初次搭建vue环境(最基础的)

    一直以来觉得搭建环境是自己的短板,恰巧老大跟我说他刚才面试一个有4年工作经验的人,给那面试的人出了到机试题,给了1小时的时间连环境都没搭好.且不说那人的工作经验是否掺有水分,自己还是有点尴尬的,以前的 ...

  2. VUE-Windows系统下搭建vue环境

    一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:).注意记下路径..   此处默认安装这4项即可,点击Next按钮. ...

  3. 18.搭建 vue 环境

    第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...

  4. 搭建Vue环境总是出错,就重新安装就好了

    总是报错,还不如重新安装.. 错误千奇百怪,解决了 这个错误又会出现另外一个. 百度了一个挺好用的e 在window下搭建Vue.Js开发环境   nodejs官网http://nodejs.cn/下 ...

  5. 如何搭建Vue环境?

    搭建vue的开发环境: https://cn.vuejs.org/v2/guide/installation.html 1.     必须要安装nodejs cnpm  下载包的速度更快一些. 地址: ...

  6. 从零开始搭建vue+element-ui后台管理系统项目到上线

    前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...

  7. 搭建vue环境

    1. 下载安装nodejs 截至2018-06-05 最新稳定版本为 8.11.2,直接 next ,不改目录. PS C:\Users\Administrator> node -v v8.11 ...

  8. 手动搭建Vue环境

    Vue+webpack+babel环境搭建 github地址 https://github.com/haoyongliang/webpack-babel-Vue 1.首先要了解Vue项目结构 简单的目 ...

  9. 在windows下用脚手架搭建vue环境

    做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接 ...

  10. Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目(Windows平台)

    一.搭建Android开发环境 准备工作:下载Eclipse.JDK.Android SDK.ADT插件 下载地址:Eclipse:http://www.eclipse.org/downloads/ ...

随机推荐

  1. Complex social network Partition for Balanced Subnetworks---Hao Lan Zhang,Jiming Liu,Chunyu Feng,Chaoyi Pang,Tongliang Li,Jing He阅读

    摘要:Abstract—Complex social network analysis methods have been applied extensively in various domains ...

  2. 堆栈在linux内存中的使用

    链接:https://www.zhihu.com/question/57013926/answer/151506606 1.Linux 内核中使用 task_struct 作为进程描述符,该结构定义在 ...

  3. eclipse和myeclipse的配置(基于工作空间)

    eclipse和myeclipse的配置是基于工作空间的,一旦工作空间发生改变,就需要重新配置. 以eclipse为例,新建工作空间后,选择Window--->Preferences: 1.在W ...

  4. Kafka详解四:Kafka的设计思想、理念

    问题导读 1.Kafka的设计基本思想是什么?2.Kafka消息转运过程中是如何确保消息的可靠性的? 本节主要从整体角度介绍Kafka的设计思想,其中的每个理念都可以深入研究,以后我可能会发专题文章做 ...

  5. VC查找字符串

    第一种方式#include "stdafx.h" #include <string.h> #include <stdio.h> #include <W ...

  6. QT QStringListModel 示例代码

    1.  QStringListModel , 实现 插入 删除 编辑 list,支持鼠标双击编辑. 2. dialog.h #ifndef DIALOG_H #define DIALOG_H #inc ...

  7. python3与anaconda2共存

    我是先下载了python3,后来因为需要2为了省事就去下载了anaconda2,但发现这里有个很严重的共存问题. 找了一下网上的各种共存问题,发现网上的基本上都是基于一个anaconda然后通过虚拟环 ...

  8. ubuntu安装Qt5

    1.ubuntu 10.04 desktop amd64 问题: 1.1. 没有GLIBCXX_3.4.15版本,或是更高的版本 http://blog.chinaunix.net/uid-91530 ...

  9. MySql基础学习-数据操作

    对于数据的操作,无非是“增删该查”这几种操作. 1增加 数据的增加使用insert语句插入 语法:INSERT INTO TABLE_NAME(column1,column2,...)VALUES(v ...

  10. Hibernate中使用Spring Data JPA

    一.配置文件的方式 1.pom.xml中引入相关依赖 <properties> <project.build.sourceEncoding>UTF-8</project. ...