Windows下搭建Vue环境

Vue简介

Vue.js是一套构建用户界面的 “渐进式框架”。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。2016年,Vue同Angular、React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建。

下载node.js

Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js。node.js的官方地址为:https://nodejs.org/en/download/
下载相应版本,我选择的是windows64位

image.png

下载完毕后一直点下一步安装即可,安装后的目录要记下来,将路径加入系统环境变量中

cnpm的安装

安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,大家都知道下载速度是超级慢啊。所以我们要安装cnpm,cnpm是淘宝对npm的镜像服务器,这样依赖的包安装起来就快多了。
安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org

vue、vue-cli的安装

cnpm install -g @vue/cli

vue -V 检查vue版本号

试试新建一个Vue项目

  • 新建一个项目文件夹,命名为 vue-demo,cd到此文件夹,输入:vue init webpack vue-demo,回车,按照如下操作进行初始化:

  • image.png
    我记得 执行命令后需要一直回车然后输入y,一路确定下去

  • cd到vue-demo 文件夹,执行cnmp install,安装依赖包,安装完成之后,项目目录下多了node_modules:

  • 在命令行里输入 cnpm run dev,执行完成后启动项目,浏览器出现以下接结果,说明启动成功。注意浏览器的版本,低版本的不支持哦。

image.png

image.png

如果喜欢我的文章,点赞分享哦

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×