菜鸟的第一个vue-cli程序

说明

本文参考了参考了网上部分教程，成功搭建第一个vue-cli入门程序

注意：本文仅为记录学习轨迹，如有侵权,联系删除

一、vue-cli安装

前提：安装了nodejs环境，关于nodejs环境配置可以查看本人之前的博文
命令：npm install --global vue-cli
注意：执行完该命令后，会将vue-cli安装到之前配置nodejs环境时，自己配置的文件路径里面，关于nodejs环境配置可以查看本人之前的博文


环境变量的添加，将安装的vue-cli添加到环境变量，经过本人测试，如果不添加后面会出错，找不到vue

查看vue-cli是否安装成功

二、创建项目

命令：vue init webpack 项目名称

进入要创建的项目存放的文件夹，输入命令

创建成功后的截图

三、项目说明

用idea打开刚创建的项目，可以看到整个项目的完整结构

对文件结构的简单说明，数据整理如下
build：构建目录，保存一些webpack的初始化配置
config：整个项目的配置目录
src：源码目录，用于存放的源码，用于开发的地方
- assets：静态资源目录存放图片等静态资源 
- components：组件的目录，用来放组件文件
- router：项目的路由
- app.vue：项目中根组件
- main.js：项目的主入口
- node_modules：npm加载的项目依赖的模块
static：静态资源目录存放图片等静态资源，跟assets差不多
test：初始测试目录，可删除
.babelrc babel：编译参数，vue开发需要babel编译 
.gitignore：用来过滤一些版本控制的文件，比如node_modules文件夹 
index.html：是首页入口文件，你可以添加一些 meta 信息或统计代码啥。 
package.json：是项目配置文件，记载着一些命令和依赖还有简要的项目描述信息 
README.md：项目的说明文档，markdown 格式，介绍自己这个项目的

四、项目启动

*注意：项目的启动可以在idea里面的Terminal启动，但需要配置为管理员权限，这里选择用命令提示符窗口启动，有一点注意要用管理员权限启动命令提示符窗口

启动命令：npm start
注意：需要先进入项目的package.json所在的目录，不然后面会出错

运行成功截图

至此vue-cli项目创建成功