如何新建一个vue项目（图文详解）

作为一个几年IOS开发经验的移动端程序猿来说，已经感到很大的危机感，不得不学习新的东西，选择了在众多框架中脱颖而出的vue作为学习的目标。

定好目标，首先应该想到的就是安装环境，搭建框架，一步一步的完成最基础的新建一个Vue项目的目的。

第一步npm安装

步骤：

1. 到node 官网选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可。

2. 输入node -v，如果出现版本信息即表示安装成功。

第二步：使用淘宝NPM 镜像

1. 输入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安装淘宝镜像安装相关依赖。

2. 安装vue-cli脚手架构建工具，输入命令 npm install -g vue-cli，安装完成即可。

第三步：使用vue-cli创建项目

1. 选定路径，新建vue项目，这里我是新建到桌面上新建vue项目文件夹里。

2.使用脚手架安装项目： vue init webpack +项目名称，项目是基于webpack的

第四步：启动项目

1. 进入项目目录：cd demo,(这里我是用webStorm打开的项目)

2. 安装项目所需要的依赖：npm install （如果用webStorm打开的话就需要一下界面显示操作）

3. 启动项目：npm run dev

启动成功，浏览器打开：localhost:8080，即可看到vue项目。

最后查看项目vue的目录结构

如何新建一个vue项目（图文详解）相关推荐

如何运行vue项目？(详解，建议收藏) ❤️
如何运行vue项目 (详解,建议收藏) 转载首先,列出来我们需要的东西: node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像安装node.js 从no ...
一、快速开始一个 MyBatis项目（详解）
1.0 概述 1.三层架构界面层: 和用户打交道的, 接收用户的请求参数, 显示处理结果的.(jsp ,html ,servlet) 业务逻辑层: 接收了界面层传递的数据,计算逻辑,调用数据库,获取 ...
计算机创建硬盘分区,Win7系统中怎么创建新的磁盘分区 win7新建磁盘分区过程图文详解...
win7有库的设置,很贴心.但它默认的位置是C盘,很占空间.如果可以新建一个磁盘分区,那就可以更方便的使用电脑.本文,小编就来为你解决这个问题"Win7怎么创建新的磁盘分区",具体 ...
使用 Pycharm 创建一个 Django项目（详解）
文章目录 Django 简介创建Django的虚拟环境 1.这里我使用的是anaconda navigator创建的,选择environment,点击create. 2.设置环境名称,选择pytho ...
vue 目录名称详解_使用脚手架创建vue项目目录详解
1.目录 build 构建脚本目录: 配置了webpack的基本配置.开发环境配置.生产环境配置等: 2.目录 config 构建配置目录: 配置了路径端口值等 3.目录 lib-img 我自己建的, ...
使用脚手架创建的vue项目目录详解
这是一个使用vue脚手架构建的项目,安装了需要的依赖.先看大致的目录情况. 目录 build 构建脚本目录: 配置了webpack的基本配置.开发环境配置.生产环境配置等: 目录 config 构建配 ...
php vue博客,新建一个vue项目
转载文章地址 http://www.cnblogs.com/binmengxue/p/6831850.html 1.Node.js安装 https://nodejs.org/en/download/ ...
idea 搜不到vue插件_IDEA安装vue插件图文详解
非常详细的IDEA安装vue插件的方法,供大家参考,具体内容如下 1.idea上面安装vue插件 (到这里idea安装vue插件就好了,接下来我们开始搭建我们后台管理系统) 2.利用vue搭建后台管理 ...
vue项目编写html,从头搭建、编写一个VUE项目
一.创建VUE项目 1.新建一个vue项目进入工作目录,新建一个vue项目:vue init webpack 项目名 vue init webpack vue-project-demo image. ...
如何开始一个vue项目
万事开头难~ 刚开始学习vue.js就是看看官方文档,然后在.html文件里引入下载到本地的vue的库文件,来跟着敲示例代码.但是接触到vue的项目,发现自己完全不知从何下手.之后再网上查找了一些vu ...

如何新建一个vue项目（图文详解）

如何新建一个vue项目（图文详解）相关推荐

最新文章

热门文章