Windows下搭建Vue.js+Webpack+Vue-cli环境

1 、概述

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
首先vue.js的作者是中国人,所以说他是国产的,吸收了google的angular.js和facebook的react.js的特性,摒弃了jquery传统的DOM操作,采用数据绑定和指令等概念,可以说是未来WEB端开发的趋势,但是也并不代表jquey就淘汰了,存在即合理,jq应该在以后会有其他领域的价值。

2 、安装说明

首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要安装node.js。node.js的官方地址为:https://nodejs.org/en/download/

3 、安装 node.js

按照windows一般应用程序,一路next就可以安装成功,建议不要安装在系统盘(如C:)
安装完成后,wind+r 弹出cmd,输入node -v 和 npm -v 分别查看版本号,代表node.js安装完成

4、安装cnpm

由于许多npm包都是在国外,安装起来特别慢,所以我们这里利用淘宝的镜像服务器,来对我们依赖的module进行安装。
安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org 之后回车等待命令

5、安装vue-cli

命令为:cnpm install -g vue-cli,回车,等待安装
安装完后,可以输入vue,然后回车,如果出现vue的信息,则说明安装成功了

6、创建项目

新建项目文件夹,我的命名为MyVue,然后,打开此文件夹,右键git bash here,定位到此文件夹,输入:vue init webpack my-vue(项目文件夹名),回车
此时,观察my-vue的文件夹下又多了一个my-vue文件夹,这个就是vue项目的文件夹
之后通过命令:cd my-vue 进入此文件夹,在利用命令:cnpm install,回车,等待一小会儿,回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)
如下图:


Windows下搭建Vue.js+Webpack+Vue-cli环境_第1张图片
image.png

Windows下搭建Vue.js+Webpack+Vue-cli环境_第2张图片
image.png

7、测试

在命令行里继续输入 cnpm run dev来测试环境是否搭建成功,如果出现如下图说明成功了


Windows下搭建Vue.js+Webpack+Vue-cli环境_第3张图片
image.png

8、访问

在浏览器里输入localhost:8080就可以查看页面如下:

Windows下搭建Vue.js+Webpack+Vue-cli环境_第4张图片
image.png

你可能感兴趣的:(Windows下搭建Vue.js+Webpack+Vue-cli环境)