Vue 脚手架(vue-cli) 环境搭建

  

目录

（1）使用 npm 命令安装模块

（2）全局安装与本地安装

(3）安装 vue

(4)安装 Webpack

(5)安装 Vue 脚手架

（6）在计算机创建一个工程目录

(7)根据模版创建项目 vue init webpack 项目名

（8）安装项目依赖：cd demo #进入项目 

（9）启动项目

(10)访问项目

---

      vue 脚手架指的是 vue-cli 它是 vue 官方提供的一个快速构建单页面（SPA）环境配置的工具，cli 就是(command-line-interface ) 命令行界面 。vue-cli 是基于 node 环境利用webpack 对文件进行编译、打包、压缩、es6 转 es5 等一系列操作。目前 vue-cli 已经升级到了 3.0 版本，3.0 所需的 webpack 版本是 4.xxx，2.0 版本目前也很流行,2.0 所需的 webpack版本是 3.xxx。

环境安装
1、npm 安装 vue

        在用 Vue 构建大型应用时推荐使用 npm 安装。npm 能很好地和诸如 webpack 或Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

        关于 npm,全称【node package management】，是 node.js 内置的软件包管理器。

（1）使用 npm 命令安装模块

npm install <Module Name>

例如：我们使用 npm 命令安装常用的 Node.js web 框架模块 express：

npm install express

安装好之后，express 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require('express') 的方式就好，无需指定第三方包路径。

var express = require('express');

（2）全局安装与本地安装

npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g 而已，比如：

npm install express                 # 本地安装
npm install express -g            # 全局安装

如果出现以下错误：

npm err! Error: connect ECONNREFUSED 127.0.0.1:8087

解决办法为：

npm config set proxy null

本地安装

a. 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录）࿰