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

什么是 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

• 在浏览器中打开http://localhost:8080，成功出现如下图页面

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

• 下载安装WebStorm

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

• 创建工程

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

• 启动项目

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

npm run dev

• 成功运行项目

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