Vue2.0的使用 配置开发环境成功运行第一个项目

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/abc6368765/article/details/82688269

什么是 Vue

Vue 是一个前端框架,特点是:

  • 数据绑定

数据绑定

  • 组件化

页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来
组件化

Vue2.0 推荐开发环境

开发环境解释

Node.js 、npm 、webpack 、vue-cli 、WebStorm

安装环境

打开终端运行以下命令

  • 安装 nodejs

打开下载地址 ,选择mac os版本下载到本地,进行安装。(也可以通过Homebrew来进行安装)

  • 获取nodejs模块安装目录访问权限
sudo chmod -R 777 /usr/local/lib/node_modules/
  • 安装淘宝镜像cnpm,国外的npm下载非常慢
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装webpack
   cnpm install webpack -g
  • 安装vue脚手架
npm install vue-cli -g
  • 创建项目
vue init webpack projectName

创建项目

  • 运行项目
npm install
npm run dev

运行项目

成功运行

这里还可以使用WebStorm来创建项目

  • 下载安装WebStorm

关于WebStorm的安装这里不进行具体描述,网上很多,请自行搜索

  • 创建工程

打开WebStorm,创建工程,选择vue.js,一直点击Next即可完成项目的创建

创建工程

  • 启动项目

从命令行窗口进入vue-helloworld的根目录,输入

npm run dev

  • 成功运行项目

在webstorm点击启动按钮或者直接在浏览器中打开http://localhost:8080/

这里写图片描述

展开阅读全文

没有更多推荐了,返回首页