1. 创建Vue项目存放地址
用于存放Vue项目，找个自己处理方便的地方。本人地址：D:\Program Files\Workspace\Vue
2. 创建项目
进入cmd窗口 进入项目存放地址
执行命令【vue init webpack HelloWorld】创建Vue项目 [HelloWorld]为项目保存文件夹名称
?
录入项目名称
?
项目描述及作者
?
项目构建
选择第一项
?
是否使用router
?
是否使用ESLint
?
是否使用单元测试
?
是否使用e2e测试
?
项目创建后是否执行安装
选择第一项 是
?
创建成功后提示
?
4. 启动项目
进入项目根目录下 执行【npm run dev】
?
启动成功后提示
?
访问浏览器
?
5. 项目结构说明（不完整）
|-- 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 // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置,里面有一些插件，这些插件的作用是代码的转换
|-- .editorconfig // 编译器的配置,定义代码格式
|-- .eslintignore //忽略语法检查的目录文件
|-- .eslintrc.js //编译规则配置文件，规则定制文件，规则编译不过的时候可以在这里配置为0
|-- .gitignore // git上传需要忽略的文件格式,
|-- favicon.ico // link图标
|--.postcssrc.js
|-- index.html // 入口页面
|-- package.json // 项目基本信息如：可以配置script脚本 ^上箭头代表可以安装当前版本及以上的版本
|-- README.md // 项目说明原文地址：https://www.cnblogs.com/LFBlog/p/10740496.html
时间： 2024-10-29 17:02:59