vue专题之开发环境与项目搭建【一】

本文主要讲述vue开发环境与项目搭建
如果想看webstorm创建vue项目，点击跳转

〇、背景

项目需要，需要搭建一个VUE项目，从零开始。
鉴于网上资料参差不齐，再加上看到的博文行文思路混乱、排版糟糕，看得头疼，为此有必要对搭建过程做一个详细的记录。
本文将从VUE项目切入，全面介绍整个VUE项目需要的所有软件以及对其进行相关的介绍，不求详细，
但是至少要解决一个问题：
1、这是什么？
同时尽可能扩展两个问题：
1、能做什么？
2、怎么用？

---

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

---

vue的开发环境需要安装的软件如下

①Node.js
②cnpm
②脚手架vue-cli
④webpack-cli

---

一、安装node.js

1、node.js是什么

Node.js是一个基于Google的V8引擎，事件驱动I/O服务端JavaScript环境（runtime）
V8引擎执行Javascript的速度非常快，性能非常好。
Node.js 环境解析运行的程序语言是 JavaScript (类似于jdk环境与java语言)
Node.js 是前端框架React/Vuejs 开发环境运行的基础。

---

2、node.js可以做什么
①可以解析运行JavaScript程序
②可以操作系统资源(io,线程)，可以给所运行的程序提供操作系统资源的能力
③既可以作为web server运行js程序(通常安装在服务端)，也可以作为打包工具或者构建工具(通常安装在开发环境上)
④实现高性能服务器(因为V8引擎)

---

3、node.js怎么用

PS：
以下命令执行都是在终端（Linux环境） 或者 DOS窗口（Windows环境）
npm 是 Node Package Manager 的缩写，意思是 Node 的包管理系统
主要用法分两类，开发环境与运行环境：主要需要通过执行相关命令进行操作

①在安装了node.js的环境上可以安装js的开发工具开发js项目，如常用的WebStorm，Visual Studio Code
②在安装了node.js的环境上能直接运行node.js服务程序，如有程序rename.js直接运行以下命令即可

node rename.js

一个简单的案例：nginx上传文件
③打包构建js项目
如安装项目依赖软件包，在项目根目录执行

npm install
# 也可以直接指名软件包，如想要安装moment
npm install moment

④构建和运行js服务

# 构建 
npm run build
# 运行
npm run dev

---

4、node安装

①、【点击跳转】

②、cnpm安装：为了提高我们的效率，可以安装淘宝的镜像，安装之后可以使用cnpm代替npm
npm的服务器是外国的，所以有时候我们安装“模块”会很慢很慢甚至导致安装失败。淘宝镜像将npm上面的模块同步到国内服务器，提高我们安装模块的时间和成功率。

# 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 检查是否安装成功，如果win10 提示 禁止运行，先执行  set-ExecutionPolicy RemoteSigned
cnpm -v

---

二、安装vue-cli

1、vue-cli是什么

vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included

---

2、vue-cli安装
安装命令

npm install --global vue-cli
# 或者用 cnpm 安装 cnpm install vue-cli -g

三、安装webpack-cli

1、webpack简介
webpack是一个JavaScript应用程序的静态模块打包器

它能将多个js文件打包成一个文件（其实不止能打包js文件，也能打包其他类型的文件，比如css文件，json文件等）。

主要用法是结合vue-cli用于项目搭建打包

---

2、webpack-cli安装
安装命令

npm install webpack-cli -g

---

四、搭建VUE项目

1、执行命令创建项目

①、创建项目目录，如 C:\Users\Public\projects
②、进入项目目录执行命令 vue init webpack 项目名

之后看项目目录

---

2、安装项目依赖

进入项目根目录，这里是 C:\Users\Public\projects\vue-test-1
执行 命令

cnpm i

---

3、启动项目

执行命令

npm run dev

然后到浏览器打开网址 http://localhost:8080

五、VUE项目目录说明

完成！

---

拓展
vue , vue-cli , webpack 的区别以及关联

---

---

---

---

---

vue专题下一篇：vue专题之webstorm创建vue项目【二】