Vue入门学习1

Vue入门学习1

1. 基本环境说明

操作系统：win10
代码编辑器：vscode

2. 安装NODE、NPM

2.1确认是否安装

如果不确定自己是否安装了node、npm,可以在命令行执行检查版版本命令确认：
node -v
npm -v
若出现相应的版本号则表明你已经安装过了。

2.2安装

如果没有安装，百度搜索"node.js"进入nodejs.cn网站，进入下载页面：

默认安装后，系统里面就安装好了npm了。

2.3配置npm国内镜像源

npm config set registry https://registry.npm.taobao.org
验证配置结果：
npm config get registry

3.安装VUE-CLI脚手架构建工具

使用npm安装vue-cli
npm install -g vue-cli
-g表示全局 (vue-cli必须全局安装)
然后等待安装完成。

验证是否安装成功：
       vue -V

使用vue-cli webpack模板构建第一个vue项目
在操作系统命令行，或者vscode终端下进入要构建项目的目录：
cd d:\vuestudy
或：linux shell下：

$ cd /d
Administrator@DESKTOP-6F172MT MINGW64 /d/vuestudy
$ mkdir vuestudy
Administrator@DESKTOP-6F172MT MINGW64 /d/vuestudy
$ pwd
/d/vuestudy
$ vue init webpack vue-webpack1

默认一路回车，这样第一个项目 vue-webpack1就构建好了，运行试一试。

$ cd vue-webpack1

Administrator@DESKTOP-6F172MT MINGW64 /d/vuestudy/vue-webpack1
$ npm run dev

这时候，可以看到项目已经运行：

 DONE  Compiled successfully in 2203ms                                                                                             11:54:04

 I  Your application is running here: http://localhost:8081

从浏览器打开：

完成！

下一篇 vue入门学习2-在模板例程里添加一个组件