Vue.js学习

安装

node.js环境（npm包管理器）

vue-cli 脚手架构建工具

Node.js

直接官网下载：https://nodejs.org/en/download/ 然后直接下一步安装

可以查看版本号

node -v

NPM

在用 Vue 构建大型应用程序时，推荐使用 NPM 安装方式。它可以很好地与模块打包器(module bundler)（例如 webpack 或 Browserify）配合使用。

npm包管理器，是集成在node中.

查看版本号

npm -v

 

安装vue-cli脚手架构建工具

使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：或者（npm install -g webpack）

npm install webpack -g

安装完成之后输入 webpack -v

全局安装vue-cli，在cmd中输入命令:

安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

用vue-cli构建项目

首先要指定目录，然后在指定目录输入命令。

初始化项目

vue init webpack VueProjectName 

VueProjectName 为项目名称

cd 进入项目文件夹（VueProjectName）

npm install

安装完成之后，会在我们的项目目录文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

文件夹结构如下：

在项目目录中，运行命令

 npm run dev 

项目运行成功后，浏览器会自动打开，路径如下：