Vue在windows的环境配置

前言:

  最近因为在筹备一个官网的创建,遂前段选择vue+elemen的方式搭建项目。所以需要搭建vue环境,在搭建的时候遇到很多坑,可能是教程老的原因,老是出错,遂出此教程。

过程:

  1:安装node.js(https://nodejs.org/en/)

地址:https://nodejs.org/en/ 下载安装

测试是否安装成功:nodejs里面会安装npm指令,显示版本号安装成功。

  2:配置nodejs prefix(全局)和cache(缓存)路径

先找到nodejs的安装目录(默认C:\Program Files\nodejs)

在nodejs安装路径下,新建node_global和node_cache两个文件夹

命令进行修改设置

npm config set cache "C:\Program Files\nodejs\node_cache"
npm config set prefix "C:\Program Files\nodejs\node_global"

  3:设置环境变量

新增:NODE_PATH 指向我们创建的node_global文件夹

PATH下面加入:C:\Program Files\nodejs\node_global(指向node_global 别忘记修改成自己的目录)

  4:安装webpack,打开命令行工具输入:npm install webpack -g

  5:安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g

这两步要是失败就是环境变量没有配置好

  6:检查   vue-V为大写

  

创建一个vue项目

  1. 在硬盘上找一个文件夹放工程用的: cd 目录路径
  2. 安装vue脚手架输入:vue init webpack exprice ,注意这里的“exprice” 是项目的名称可以说是随便的起名,但是需要主要的是“不能用中文”。

$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev
如下图:

  1. cd 命令进入创建的工程目录,首先cd exprice(这里是自己建工程的名字);
  2. 安装项目依赖:npm install,因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。
  3. 启动项目:npm run dev
  4. 访问 localhost:8080即可

原文地址:https://www.cnblogs.com/GH0522/p/10272456.html

时间: 2024-09-30 16:21:40

Vue在windows的环境配置的相关文章

【转】cocos2d-x windows开发环境配置

声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级后的cocos2d-x有了一些变化,目前的博文还没有关于Cocos2d-x 2.2.1最新版搭建Android交叉编译环境组建的说明,所以我这几天研究了一下,现在将具体的搭建方法分享出来,也给自己学习Cocos2d-x做个笔记. 参考博文: http://www.cnblogs.com/lhming/archive/2012/06/27/2566460.htmlhttp://www.cnblogs.com/l

Windows JAVA 环境配置

JAVA_HOME环境配置 "计算机"->"属性"->"高级"->"环境变量"->系统变量下的"新建"->变量名:JAVA_HOME 变量值C:\Program Files\Java\jdk1.7.0_55; JAVA_HOME=C:\Program Files\Java\jdk1.7.0_55; path=%JAVA_HOME%\bin; classpath=.;%JAVA_

google protobuf学习笔记一:windows下环境配置

欢迎转载,转载请注明原文地址:http://blog.csdn.net/majianfei1023/article/details/45371743 protobuf的使用和原理,请查看:http://blog.csdn.net/majianfei1023/article/details/45112415 Windows下google protobuf开发环境配置 最近项目需求,Client与Server的网络通信协议传输使用google protobuf rpc.对于Protobuf,以前是只

thrift 服务端linux C ++ 与客户端 windows python 环境配置(thrift 自带tutorial为例)

关于Thrift文档化的确是做的不好.摸索了很久才终于把跨linux与windows跨C++与python语言的配置成功完成.以下是步骤: 1)                 Linux下环境配置 l  完成thrift所依赖的其他软件包的安装:Boost.libtool.libevent.bison.flex 解压boost_1_55_0,进入boost_1_55_0目录下 chmod 777 bootstrap.sh chmod 777 ./tools/build/v2/engine/bu

Clang+llvm windows运行环境配置

下了官网Pre-built Binaries:Clang for Windows( llvm.org/releases/3.5.0/LLVM-3.5.0-win32.exe )03 Sep 2014 3.5.0 The LLVM Compiler Infrastructure(llvm.org) download LLVM(llvm.org/releases/) 由于刚刚安装了 TDM GCC 4.9.2 tdm64-gcc-4.9.2-3.exe 2014 December 12th(tdm-

andriod 在windows上环境配置

andriod开发环境配置 个人信息:就读于燕大本科软件工程专业 目前大四; 本人博客:google搜索"cqs_2012"即可; 个人爱好:酷爱数据结构和算法,希望将来从事算法工作为人民作出自己的贡献; 编程语言:java ; 编程坏境:Windows 7 专业版 x64; 编程工具:jdk,eclipse,AVD; 制图工具:office 2010 powerpoint; 硬件信息:7G-3 笔记本; 64位windows 环境配置 1.安装jdk 安装到默认目录,即一直选择nex

CUDA学习日志:windows开发环境配置

接触CUDA的时间并不长,最开始是在cuda-convnet的代码中接触CUDA代码,当时确实看的比较痛苦.最近得空,在图书馆借了本<GPU高性能编程 CUDA实战>来看看. Jeremy Lin 什么是CUDA CUDA(Compute Unified Device Architecture)是一种专门为提高并行程序开发效率而设计的计算架构.在构建高性能应用程序时,CUDA架构能充分发挥GPU的强大计算能力.更多的介绍,可以参考NVIDIA的ABOUT PAGE. CUDA开发环境配置 在开

Laravel for Windows 开发环境配置

本文为CSDN Choris 原创,转载请事先征得作者同意,以示尊重! 原文:http://blog.csdn.net/choris/article/details/50215835 Laravel配置教程 本文在参考岁寒博客Laravel 5 系列入门教程(一)[最适合中国人的 Laravel 教程]的基础上写成1. 1.XAMPP集成开发环境 Laravel是一个PHP开发框架,用Laravel框架开发的网站需要运行于有PHP+数据库+web服务器的操作系统上.一般要求PHP版本5.4+,M

Arduino101学习(一)——Windows下环境配置

一.Arduino IDE下载 要开发Arduino 101/Genuino 101,你需要先安装并配置好相应的开发环境.下载地址 http://www.arduino.cn/thread-5838-1-1.html PS:Arduino IDE 1.6.7或更新的版本才可用于Arduino 101/Genuino 101开发 二.添加101支持 1.在IDE中进行添加 选择安装就可以了. 2.使用国内好人提供的百度云 由于服务器在国外把,不稳定,安装很慢.所以一般使用中文社区里面的资源.这边自