windows7 搭建Vue 开发环境

r囧r小猫 2024-02-17 21:24 24阅读 0赞

第一步：node.js 安装

vue的安装依赖于node.js,要确保你的计算机上已安装过node.js。可进入cmd编辑器，输入命令 node -v进行查看。node尽量要用新一些的版本，否则后续安装会提示node版本过低。去node官网下个新版的node重新安装就可以。如已成功安装node会出现如下：

![Center][]

第二步：淘宝cnpm 安装

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

node的安装在此就不再说明了。确定node安装后，就可以开始vue的安装了。这里提一下淘宝镜像，用淘宝镜像的cnpm来代替npm的安装，速度会快很多。淘宝镜像推荐网址： [https://npm.taobao.org/][https_npm.taobao.org] 。成功后同样可查看版本：

![Center 1][]

第三步：安装Vue 框架

cnpm install -g vue-cli

如果使用淘宝镜像安装就输入命令行 $ cnpm install -g vue-cli进行安装，如果没有安装淘宝镜像依旧用$ npm install -g vue-cli安装：

![Center 2][]

到此vue已经安装成功了。

## 建一个vue项目 ##

这里我们使用vue官网的命令行工具。Vue.js 提供一个 [官方命令行工具][Link 1] ，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装淘宝cnpm 镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    # 判断cnpm 是否安装成功
    cnpm -h
    # 全局安装vue-cli
    cnpm install -g vue-cli
    # 判断vue-cli 是否安装成功
    cnpm list
    #创建一个基于webpack模板的新项目
    vue init webpack d:\nodeworkspace\nodeone
    # 切换至项目路径
    cd d:\nodeworkspace\nodeone
    # 安装项目依赖文件
    cnpm install
    # 项目启动
    cnpm run dev

接下来我的浏览器就弹出了搭建成功后的首页，开心。

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/dcca710dd23d4255972d761ee9b5f4b5.png
[https_npm.taobao.org]: https://npm.taobao.org/
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e697ac9b57324b96b0ca193e584870dc.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/baa778e743344095b19e543fbc005dd2.png
[Link 1]: https://github.com/vuejs/vue-cli