Vue的安装教程 呆萌式学习
2017-11-01 17:45
204 查看
Vue安装教程
一. node.js安装
1. 官网下载(https://nodejs.org/en/download/)
二. Vue安装
以下步骤要在cmd(windows+R)或者管理员模式powershell下进行,输入:
1. node -v 检查版本号
![](http://img.blog.csdn.net/20171101174801888?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
2. npm -v检查版本号
![](http://img.blog.csdn.net/20171101174907803?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
3. npm install vue 安装
![](http://img.blog.csdn.net/20171101175001321?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
4. npm install -g vue-cli 安装脚手架
![](http://img.blog.csdn.net/20171101175129538?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
5. vue -V(大写检查版本是否安装)
![](http://img.blog.csdn.net/20171101175200486?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
6. vue 若出现vue信息说明成功
![](http://img.blog.csdn.net/20171101175231179?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
7. npm init webpack vue_test 创建项目名称为(vue_test)
![](http://img.blog.csdn.net/20171101175305320?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
8. cd vue_test进入具体项目文件夹
![](http://img.blog.csdn.net/20171101175332978?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
9. npm install安装依赖
回车后会在项目结构里多一个node_modules文件
![](http://img.blog.csdn.net/20171101175421166?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20171101175454466?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
10. npm run dev 测试环境是否搭建成功。
在浏览器里输入localhost:8080(默认端口8080)
![](http://img.blog.csdn.net/20171101175541310?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20171101175614803?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQUxJU0FfTFI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
哇哦,大功告成喽!
如若有问题,请将node卸载,nodev及vue相关文件删除,重新操作。
连我都可以操作,相信你肯定没有问题喽!
一. node.js安装
1. 官网下载(https://nodejs.org/en/download/)
二. Vue安装
以下步骤要在cmd(windows+R)或者管理员模式powershell下进行,输入:
1. node -v 检查版本号
2. npm -v检查版本号
3. npm install vue 安装
4. npm install -g vue-cli 安装脚手架
5. vue -V(大写检查版本是否安装)
6. vue 若出现vue信息说明成功
7. npm init webpack vue_test 创建项目名称为(vue_test)
8. cd vue_test进入具体项目文件夹
9. npm install安装依赖
回车后会在项目结构里多一个node_modules文件
10. npm run dev 测试环境是否搭建成功。
在浏览器里输入localhost:8080(默认端口8080)
哇哦,大功告成喽!
如若有问题,请将node卸载,nodev及vue相关文件删除,重新操作。
连我都可以操作,相信你肯定没有问题喽!
相关文章推荐
- Altiris安装配置学习教程(五)- PXE配置
- Altiris安装配置学习教程(七)- 配置Deployment Console 选项设置
- Altiris安装配置学习教程
- Silverlight 2学习教程(八):检测客户端是否安装 Silverlight 插件
- 黄聪:python学习之pyquery学习安装教程
- Flex学习教程,第一步,如何安装Flex开发环境(For Eclipse 插件)
- Altiris安装配置学习教程(二)- 安装配置DHCP服务
- [jQuery]学习笔记(一):jQuery的简介和安装教程
- 学习网页制作,新手必备:EditPlus3-绿色版软件安装教程
- Flex3学习入门教程:安装Flex的Eclipse插件
- Android 学习教程一 安装eclipse android
- python学习之pyquery学习安装教程
- Win7下安装VMware虚拟机图文教程(学习教程之一)
- 详解LUA环境安装学习教程
- Altiris安装配置学习教程(九)- 快速镜像
- ActiveMQ学习教程(一)——安装与示例
- Altiris安装配置学习教程(六)- 安装Deployment Web Console
- dedecms模板安装教程及模板相关知识学习
- Altiris安装配置学习教程(四)- 安装Deployment Sever 6.8
- Altiris安装配置学习教程(十一)- 使用新创建的任务 Push新机器