vue-cli3创建项目

vue-cli3创建项目

//全局安装cli3.0
npm install -g @vue/cli 
//启动vue ui界面
vue ui

启动后按照中文提示,新建项目,vue这点最好,有中文版的。
安装后界面如下
在这里插入图片描述
可以看到vue的全部配置,而且在任务里有热加载 打包等功能
在这里插入图片描述
在变量这里可以配置输出目录,域名等等
在这里插入图片描述
快速启动可以直接点serve点运行。
在本地我们可以看到新建好的目录,如下:
在这里插入图片描述

  1. vue.config.js是可选的,我安装了eslint检查,但是没有启用这个,所以有一个配置文件。
    在这里插入图片描述
  2. package.json里面是一些项目描述、版本已经开发依赖和生产依赖
  3. babel.config babel文件
  4. .eslintrc.js eslint配置文件
  5. public里面的index.html是模板文件,favicon.ico是网站前面的小图标
  6. components里面是组件存放地址
  7. views里面是页面文件
  8. router.js 路由
  9. store.js 状态管理文件

现在我们要修改下整体目录
1. api 接口文件
2. config/index.js 存放项目配置
3. asset/img 图片
4. asset/font 字体图标
5. directive/index.js 自定义指令
6. lib/util.js 业务方法
7. lib/tools.js 工具方法
8. router/index.js 复杂的路由拦截等操作
9. router/router.js 路由列表
10. mock mock数据

最终目录接口请参考GitHub地址vue-course frist commit

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章