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中修改端口号

你可能感兴趣的:(vue-cli)