vue-cli初次使用过程

介绍

• 官网
• Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
• npm 安装

npm install -g @vue/cli

• 查看版本 vue --version
  

创建一个项目

vue create hello-world

• 创建成功
  

使用gitbash

• 先创建~/.bashrc
  
• 输入

alias vue='winpty vue.cmd'

• 命令模式输入wq,保存退出
• 跟上面的命令创建一样

可视化管理

• 进入界面

vue ui

• 创建
  
• 管理界面
  ### 运行项目

npm run serve

• 浏览器地址栏输入：http://localhost:8080/
  

目录结构

|-- node_modules //安装的依赖代码库
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- public
| | -- favicon.ico //图标
| | -- index.html // 入口页面
|-- src // 源码目录
| |--assets //静态资源
| | | -- logo.png
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 项目的主组件，所有页面都是在app.vue下切换的。
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .gitignore // git上传需要忽略的文件格式
|-- babel.config.js //Babel 配置
|-- package-lock.json//锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。
|-- package.json // 项目基本信息
|-- README.md // 项目说明