乐趣区

Vue入门:Vue项目创建及启动

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

退出移动版