1,vue环境搭建

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

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

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

打开Node.js官网,

vue.js环境搭建及创建第一个vue.js文件

导航栏选择下载,使用推荐版本;

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

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

vue.js环境搭建及创建第一个vue.js文件

(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

vue.js环境搭建及创建第一个vue.js文件

(4);安装vue-cli

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

vue.js环境搭建及创建第一个vue.js文件

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

输入vue -v 查看vue版本

(5);安装webpack和webpack-cli

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

安装同上:

webpack安装:npm install -g webpack

vue.js环境搭建及创建第一个vue.js文件

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

vue.js环境搭建及创建第一个vue.js文件

环境基本已经搭建完成;

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

输入:vue init webpack (文件名)

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

 

vue.js环境搭建及创建第一个vue.js文件

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? //测试

个人建议:测试关掉

相关文章: