菜鸟的第一个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项目创建成功