1.创建Vue项目存放地址
用于存放Vue项目,找个自己处理方便的地方。本人地址:D:Program FilesWorkspaceVue
2. 创建项目
进入cmd窗口 进入项目存放地址执行命令【vue init webpack HelloWorld】创建Vue项目 [HelloWorld]为项目保存文件夹名称
录入项目名称
项目描述及作者
项目构建选择第一项
是否使用router
是否使用ESLint
是否使用单元测试
是否使用e2e测试
项目创建后是否执行安装
选择第一项 是
创建成功后提示
3. 启动项目
进入项目根目录下 执行【npm run dev】
启动成功后提示
访问浏览器
项目结构说明(不完整)
|– 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 // 项目说明
发表回复