vue.js环境搭建及创建第一个vue.js文件_vue.js和直接创建.vue文件

1，vue环境搭建

1，使用vue.js推荐使用 npm安装，npm能很好地和webpack模块打包器配合使用；

2，vue.js推荐使用的开发环境是Node.js

(1),如何安装Node.js;

打开Node.js官网，

导航栏选择下载，使用推荐版本；

下载完成后，傻瓜安装就行；安装完成后简单测试一下是否安装成功，【win+R】输入cmd，然后回车，打开cmd窗口

输入node -v和npm -v ，也可以用编程软件的Linux环境输入，显示当前安装的版本号，表示安装成功

(2),安装cnpm（淘宝镜像）；

由于npm有些资源被屏蔽或是国外资源下载速度的原因，因此使用(淘宝镜像)

临时使用：npm --registry https://registry.npm.taobao.org install express

持久使用：npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否成功

npm config get registry 或 npm info express

通过cnpm使用

npm install -g cnpm 或 npm install express

在一段代码中 -g的意思是为了全局使用

(3)，安装vue

输入npm install -g vue

(4)；安装vue-cli

如上同理：npm install -g vue-cli

vue-cli是一种全局脚手架用于帮助所需的模板框架

输入vue -v 查看vue版本

(5)；安装webpack和webpack-cli

webpack可以看做是模块打包机，他做的事情就是分析项目结构找到JavaScript模块以及一些浏览器不能直接运行的拓展语言，并将其打包成合适的格式以供浏览器使用

安装同上：

webpack安装：npm install -g webpack

webpack-cli安装：npm install -g webpack-cli

环境基本已经搭建完成；

2，创建第一个vue.js项目

输入：vue init webpack （文件名）

创建的时候会出现一些问题或选项

 

project name //项目名称
Project description //项目描述
Author //作者
Vue build //建立
Install vue-router? //路由器
Use ESLint to lint your code? //书写规范
Pick an ESLint preset //选择一个ESLint预置
Set up unit tests //测试
Setup e2e tests with Nightwatch? //测试

个人建议：测试关掉