本文共 1239 字，大约阅读时间需要 4 分钟。

介绍

• 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 // 项目说明

转载地址：http://qhden.baihongyu.com/