WEB前端程序开发前端Vue.js的学习过程与心得

如何新建一个vue项目(图文详解)

2018-10-25  本文已影响2人  honey缘木鱼

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

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

第一步npm安装

步骤:

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

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

node版本号

第二步:使用淘宝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项目文件夹里。

vue项目路径

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

初始化


项目初始化完成

第四步:启动项目

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

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

webstorm终端位置 启动项目

3. 启动项目:npm run dev

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

打开新建vue项目页面

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

项目配置

一个完整的vue小项目就这样创建完成了,开启了学习vue的道路。

上一篇 下一篇

猜你喜欢

热点阅读