vue开发环境搭建-前端开发

一.安装流程注：这里是windows系统的环境搭建。安装node.js.基于node.js,利用淘宝npm镜像安装相关依赖, 即安装cnpm.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架.创建项目测试环境是否搭建好。安装webpack,静...

一.安装流程

注：这里是windows系统的环境搭建。

安装node.js.
基于node.js,利用淘宝npm镜像安装相关依赖,
即安装cnpm.
安装全局vue-cli脚手架,用于帮助搭建所需的模板框架.
创建项目测试环境是否搭建好。
安装webpack,静态模块打包器。

二.流程详情

1.安装node.js
https://nodejs.org/en/
如图所示：

安装最新版本的LTS包（长期稳定版本）

这里默认安装路径为 “C:\Program Files\nodejs” , 你可以修改目录，并点击 next（下一步）：

验证node.环境

键盘同时按下 windows+R 按键，打开dos命令窗口。
输入： node-v ,
显示node版本信息，则node.js安装成功。
如图：

2 安装cnpm

dos命令窗口输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

回车，等待安装完成…

验证
输入： cnpm -v
显示相关信息，则安装成功。

3.安装全局vue-cli脚手架
简介：vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板。

dos命令窗口输入：

cnpm install -g vue-cli

回车，等待安装完成…

验证
输入： vue -V
注意：这里的V大写
显示版本信息，则安装成功。

4. 创建第一个vue项目测试
① 定位到创建文件所在位置：
② 执行命令：vue init webpack Demo
③ 进入项目，下载依赖，输入：
cd Demo
cnmp install
④测试是否成功
运行：dos命令窗口输入：npm run dev
注意：如果报如图错误，则是你漏了一步，项目依赖没有下载。
在项目位置，输入： cnmp install，回车。

在浏览里输入：localhost:8080(默认端口为8080)
如图所示，则创建成功。
注意：
1.vue init webpack vuedemo创建项目时报错，提示连接超时.

原因是 vue-cli安装时出现问题，少了一个package,那是因为你可能使用国外的npm install -g vue-cli 安装脚手架，需要翻墙，访问受到限制。而使用国内淘宝镜像cnpm install -g vue-cli命令安装，则不会出现这问题.

解决办法有两种：
1.参照别人的离线下载包方法
2. 直接卸载vue-cli脚手架，重新使用cnpm install -g vue-cli利用淘宝npm镜像安装。
① 卸载指令： npm uninstall vue-cli -g
② 检查是否安装cnpm, cnpm安装成功后，输入cnpm install -g vue-cli命令安装。

2.npm run dev 运行项目时报错，从以下几个方面检查：
1. 8080端口号可能被别的资源占用，修改端口号。
2. 项目依赖node_modules文件是否在项目目录存在。
3. 关闭windows防火墙和杀毒软件。

5.安装Webpack(项目打包工具)
由于很多浏览器还不支持ES6规范，所以可以使用webpack 把各种资源当做模块来处理和使用，打包成相应的支持的版本
①安装全局webpack
cnmp install webpack -g
②安装全局webpack-cli
cnmp install webpack-cli -g

三.Vue项目目录结构介绍