从零开始搭建Vue开发环境（windows）

一、 介绍

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层。目前是一些互联网公司组六的前端框架。

二、 搭建步骤

1 搭建node环境

node下载地址：http://npm.taobao.org/mirrors/node，进入node下载的淘宝镜像地址，选择最新的安装包(也可选择稳定的安装包）.msi文件，对应自己开发环境，如图。

下载完毕之后选择安装，一直点击下一步即可，安装完毕之后打开cmd，输入node -v，查看是否安装成功。

至此，node安装完毕，node安装完毕之后，可使用npm命令设置镜像仓库。下一步设置镜像仓库，建议使用国内淘宝封装的镜像仓库。使用npm config set registry https://registry.npm.taobao.org命令；

2 搭建vue项目

1）全局安装脚手架vue-cli

使用npm命令全局安装脚手架，npm install -g @vue/cli，如图：

检查脚手架是否安装成功，使用：vue -V(大写的V)，如图：

安装好脚手架以后，我们就可以创建vue项目了，新建一个项目文件夹，开始搭建项目。

2）创建一个基本的vue项目

打开刚刚新创建的文件夹，打开powershell窗口，输入命令：

vue create [project-name]

如图，出现默认和手动选项以供选择：

这里我们选择最后一个选项，手动配置项目，选择完后进入下一个界面：

空格键选择该项，a键全部选择，i取消选择，我们需要勾选router，其余的按需勾选。勾选完毕之后配置刚刚勾选的选项，如图：

选择完毕之后就进行项目生成了。项目跑成功之后按照提示输入进入项目文件夹，输入:

npm run serve 

项目默认启动在8080端口，启动之后如图：

项目启动以后，通过路由的方式访问页面，在浏览器输入localhost:8080即可进入到项目，如图：

至此，项目搭建启动完成。

三、项目介绍

相比于2.0版本的vue项目，3.0版本的项目少了config以及build等目录，目前目录结构如下：

项目文件介绍：

|--node_modules	// npm 加载的项目依赖模块
|--public	// biuld之后不会被合并压缩，多用来存放第三方插件
|--src
|   |--assets	// 存放项目静态资源的地方，比如图片、公共js等
|   |--components	// 项目公共组件
|   |---router	// 项目路由
|   |---views	// 项目视图文件夹，用来编写页面
|--App.vue	// vue项目主组件，页面入口文件，其他页面都是在App.vue进行切换
|--main.js	// 程序入口文件，初始化vue实例，可引入项目需要的插件或全局引入组件
|--test	// 测试文件夹
|--gitignore	// git配置，git改变不识别文件配置
|--babel.config.js	// 
|--package-lock.json	// 锁定了package.json中包的版本
|--package.json	// npm包配置文件，定义了项目的npm脚本，依赖包等信息