新手搭建vue环境和搭建vue项目

第一步:安装node

1.前端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现

node.js官网下载并安装node,Windows 安装包(.msi)

32 位安装包下载地址 : nodejs.org/dist/v4.4.3/

64 位安装包下载地址 : nodejs.org/dist/v4.4.3/

2.检查是否安装成功

快捷键WIN+R 打开cmd,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。(以管理员身份运行cmd,右击选择管理员身份)

第二步:安装淘宝npm镜像

1.由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.

淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令:npm install -g cnpm --registry=registry.npm.taobao.org

2.检查是否安装成功

输入 cnpm -v,如下图,如果出现相应的版本号,则说明安装成功。

第三步:安装webpack

1.输入命令:cnpm install webpack-cli -g

2. 检查是否安装成功

输入webpack -v,如下图,如果出现相应的版本号,则说明安装成功。

第四部:安装vue-cli脚手架构建工具

1.输入命令cnpm install vue-cli -g

2.检查是否安装成功

输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。

以上这些安装成功后,就可以搭建vue项目

第五部:搭建vue项目

1.在e盘新建一个项目,先用e:的命令,按回车键进入e盘

输入e: 按回车键进入e盘,如下图

2.初始化一个vue项目

输入vue init webpack myvue (注意项目不能有大写字母)

如下图,搭建成功

3.运行项目

首先切换到项目位置,输入: cd myvue,然后输入 npm run dev

4创建项目创建成功,如下图:

浏览器访问http://localhost:8082/ 如下图,项目搭建成功。


第六步,安装依赖包

1.退出快捷键:ctrl+c

输入命令:cnpm install

2.目录文件解释

用sublime打开myvue项目,如下:


快捷键

打开cmd:win+r

终止运行:ctrl+c

返回上一级:cd..

切换哪个盘:e: d:

文件位置:cd +文件名


参考文献

vue官网:cn.vuejs.org/v2/guide/

Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)

使用npm安装一些包失败了的看过来(npm国内镜像介绍) - CNode技术社区

The CLI moved into a separate package: webpack-cli.解决办法

webpack的安装与环境配置 - CSDN博客

vue.js 三种方式安装 - CSDN博客

编辑于 01-17