• 首页

  • 家有海

  • 编程
    Java 嵌入式 前端 Linux C# 工具

  • VR

  • 编曲混音
    乐理教程 资源

  • 资源

  • SNTU支付

  • 文章归档

  • 关于
S N T U 科 技
S N T U 科 技

慧雨哲

人多不足以依赖,要生存只有靠自己

08月
25
前端

Windows搭建Vue-cli环境

发表于 2019-08-25 • 字数统计 697 • 被 122 人看爆

Windows下安装Vuejs-cli开发环境

  • 本教程使用的工具下载地址: 下载地址-度盘

一.安装基本环境

1.安装Nodejs环境(xxxx是版本)

首选打开我压缩包里的mode-vxxxxx-x64.msi安装程序

image_text
全程无脑下一步(如果更换安装目录中途更换下即可)

2.安装Git

打开我压缩包里的:Git-xxxxx-64-bit.exe 安装程序

image_text
全程无脑下一步(如果更换安装目录中途更换下即可)

3.验证是否安装成功

如果右击鼠标出现这Git GUI Here和 Git Bash Here 说明Git安装成功!
image_text
然后我们打开Git Bash Here菜单的终端
在终端输入:

 node -v

如果出现版本提示 说明 nodejs 安装成功!

4. 安装阿里云的npm源(cnpm)

  • npm的源在国外 下载很慢所以用阿里的npm源

在电脑上新建一个文件夹,比如我创建的是VueDemo
然后进入这个文件夹
右击打开Git Bash Here菜单的终端 然后输入:

npm install -g cnpm --registry=https://registry.npm.taobao.org

image_text

二.安装Vue环境

1.安装Vue-js

在上面一步的终端终端输入:

cnpm install vue -g

image_text

2.安装Vue脚手架(Vue-cli)

在上面一步的终端输入:

cnpm install vue-cli -g

image_text
等待完成!
(查看有没有 出现Error ,一般是没有

3.全局安装Webpack

在这个终端输入:

cnpm install webpack -g

三.新建项目

1.开始构建项目

(1).找到你项目的文件夹下 比如 我的是D:\VUE\qwe

image_text

(2).右击打开git bash here终端 此时他显示的是你的项目文件夹

image_text

(3).创建项目 在终端输入:

vue init webpack 项目名(项目名不能有中文)

比如我输入:vue init webpack my-app

image_text

然后全程回车 直到 出现 Y/N 需要你选择!

image_text

Y/N步骤:

  • 是否安装路由选 Y 回车
    图片
  • 是否需要 js 语法检测 目前我们不需要 所以 n 回车
    图片
  • 是否安装 单元测试工具 目前我们不需要 所以 n 回车
    图片
  • 是否需要 端到端测试工具 目前我们不需要 所以 n 回车
    图片
  • 然后下一步 输入 Yes,use NPM 回车
    图片

(4).然后等待

图片
如果出现以下内容说明成功了!
图片

2.安装格式化代码的环境(这步很重要否则 有可能运行不了)

在这个终端输入

npm i prettier@~1.12.0

3.运行开发环境服务器

在这个输入:

cnpm run dev

不出意外出现下面图片:
image_text
如果出现错误请重新操作 第9步骤
之后就可以打开 http://localhost:8080 访问啦!
image_text

四.如果出现问题或不懂的可以在下方留言!

分享到:
CentOS7安装私人仓库-gitlab
最详细的全平台安装JDK教程
  • 文章目录
  • 站点概览
慧雨哲

帅气 小阿慧

爱好太多 ,我也不知道最喜欢什么

Github QQ Email Telegram RSS
看爆 Top5
  • SNTU PRO 微缸 正式发布 1,820次看爆
  • 纽斯K7Pro 2代珊瑚灯-光谱设定 1,661次看爆
  • 微缸造浪DIY教程和配件 1,206次看爆
  • SNTU微缸维护工具推荐 706次看爆
  • 积光1201WIFI 光谱设置 663次看爆

站点已萌萌哒运行 00 天 00 小时 00 分 00 秒(●'◡'●)ノ♥

Copyright © 2023 慧雨哲 苏ICP备16049349号-1

由 Halo 强力驱动 · Theme by Sagiri · 站点地图