Vue脚手架的安装与使用1

包管理机制

NodeJs安装成功之后，NodeJs自带一个特殊的文件模块：包（NPM）。

• 一般我们搭建前端自动化构建工具，都需要使用到NPM，包模块。

例如：搭建fis3项目，命令：npm install -g fis3
//提示：-g 安装到全局目录，必须使用全局安装

例如：搭建vue项目，需要用到vue脚手架（自动化构建工具）

• 每个项目都有一个package.json文件
• package.json文件内容包括，项目名称，项目所依赖资源（类似fis3项目，也有自己的package.json）

注意：
在fis3项目中，去安装开发环境所依赖的功能插件，有2中写法：

• 第一种：直接将功能插件安装到全局路径之中，写法如下：

npm install -g 插件名称

• 第二种：将功能插件安装到了项目当前所在的路径之中，写法如下：

npm install 插件名称

package.json文件详解

• name。包名，需要在NPM上是唯一的。不能带有空格。
• description。包简介。通常会显示在一些列表中。
• version。版本号。一个语义化的版本号（http://semver.org/ ），通常为x.y.z。该版本号十分重要，常常用于一些版本控制的场合。
• dependencies:生产环境所需要的依赖资源（编译好的在服务端可以运行的文件）
• devDependencies：开发环境所需要的依赖资源（在我们本地正在开发时候的项目所运行的文件）

注意：dependencies，devDependencies非常重要！为啥呢？理由：NPM会通过这个属性，帮你自动加载依赖的包。

语法：npm install 

项目运行所依赖的本地资源，存在node_modules文件之中，如果没有该资源，项目将不能运行起来！

npm命令

npm init： 初始化package.json文件；
npm install 包名： 安装一个依赖资源；
npm install -g 包名： 将依赖的资源安装到全局路径之中
例如：
npm install -g fis3
npm install -g vue-cli
npm root -g：查看全局包安装路径
例如：
C:\Users\Administrator\AppData\Roaming\npm\node_modules
基本是安装在C盘；

npm config set prefix "路径"：修改全局包所在的路径
npm list ：查看当前目录安装所有的包
npm list -g ：查看全局包安装路径下所有包
npm uninstall 包名：卸载一个包
npm uninstall -g 包名：卸载一个全局包
npm update 包名：更新指定包
npm update -g 包名：更新指定全局的一个包
npm update ：更新所有包

DOS命令

退出批处理程序快捷键：CTRL+C;

我的第一个VUE项目

项目执行命令

# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project：进入项目所在的根路径（package.json所在的路径就是一项目的根路径），
$ npm run dev：运行项目

修改项目端口号：
config/index.js中修改端口号