@vue/cli创建

安装脚手架VueCli4.0(插件包)

1. npm install -g @vue/cli
2. yarn global add @vue/cli
3. vue -version 查看版本

 

创建项目

vue create <name>

1. cd <name>
2. npm run serve

 

项目目录

1. dist 打包目录
2. node_modules 项目依赖包

1. public 入口页面目录，目录不参于打包，打包完成后存于根目录文件
   1. img 放置大图,使用请求加载
   2. Index.html 模板文件，生成项目的入口页面,webpack打包的js\css会自动注入改页面中，浏览器访问项目会默认打开生成好的index.html
2. resource
   1. scss 基础样式文件
      1. config.scss 样式规范表（容器安全区域规范、常规颜色规定、常规文字大小规定等）
      2. reset.scss 样式基本设置

1. src
   1. api 项目接口请求统一管理
   2. assets 放置静态小图片，打包成base64减少请求
   3. components 放置页面组件
   4. mock 测试接口
   5. pages 页面
   6. router 路由
      1. index.js 路由入口文件，导入路由，编写路由结构和路由守卫
   7. storage 数据存储
   8. store vuex
   9. util 工具包
   10. App.vue 根组件,所有页面都是在app.vue下切换的
   11. env.js 使用cors跨域时，区分不同环境下的接口域名
   12. main.js 入口文件，初始化vue实例，可以在此文件中引入某些组件库或者全局挂载一些变量

1. .env.development 开发环境基础配置
2. .env.test 测试环境基础配置

1. .env.production 生产环境基础配置
2. .editorconfig：里面是统一编辑器风格
3. .eslintignore：里面是eslint校验忽略文件
4. .eslintrc.js：里面可以配置一些自己的eslint校验规则
5. .gitignore：git的一些忽略文件

1. babel.config.js: 是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本

1. .postcssrc.js：类似于less,sass的预编译文件，但功能更加强大
2. package-lock.json：下载的包的依赖项的说明，不用动
3. package.json：pack的自描述文件，开发的依赖项
4. Vue.config.js 项目自定义配置，打包配置及项目代理

 

Vue脚手架内置可视化系统

vue ui