vue-cli工程 需要依赖node.js 环境,在电脑上安装node.js,安装完成以后在命令行输入 node -v (检测node版本),出现版本号,意味着安装成功,也就可以使用node 的包管理器 npm了。
一、vue-cli项目使用到的技术:
1、vue.js-----------它是vue-cli工程核心,提供数据双向绑定和组件系统
2、vue-router-----用于单页面路由跳转,属于vue插件,所以使用的时候可以Vue.use()
3、vuex------------状态管理,用于管理系统多个组件共享的数据
4、axios-----------用来发送请求,向后台请求数据,由于不是vue插件,不可使用Vue.use(),可以在Vue原型中添加
5、webpack------管理系统模块和打包系统
二、vue-cli项目目录结构
1、build 文件夹----存放 webpack 相关配置和脚本,开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库,或者配置一下 UI 库
2、config 文件夹----主要存放配置文件,用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等
3、dist 文件夹----默认 npm run build 命令打包生成的静态资源文件,用于生产部署
4、node_modules----存放npm命令下载的开发环境和生产环境的依赖包
5、src:----存放项目源码及需要引用的资源文件
6、src下assets-----存放项目中需要用到的资源文件,css、js、images等
7、src下componets------存放vue开发中一些公共组件
8、src下router----vue路由的配置文件
9、src下util----存放vue开发过程中一些公共的.js方法
10、src下vuex-----存放 vuex 为vue专门开发的状态管理器
11、src下app.vue-------使用标签
12、src下main.js------vue-cli工程的入口文件
13、index.html-----设置项目的一些meta头信息和提供
用于挂载 vue 节点/========================================/
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
三、config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置
build 对象下 对于 生产环境 的配置:
1、index-----配置打包后入口.html文件的名称以及文件夹名称
2、assetsRoot-----配置打包后生成的文件名称和路径
3、assetsPublicPath-----配置 打包后 .html 引用静态资源的路径,一般要设置成 "./"
4、productionGzip-------是否开发 gzip 压缩,以提升加载速度
5、assetsSubDirectory-----直接引用的静态文件
dev 对象下 对于 开发环境 的配置:
1、port------设置端口号(默认端口8080,由于8080被其他应用占用,本人已改成8089)
2、autoOpenBrowser-----启动项目时,自动打开浏览器
3、proxyTable-------vue设置的代理,用以解决 跨域 问题
四、package.json 里面的配置
1、scripts-----npm run xxx 命令调用node执行的 .js 文件(npm run dev执行启动项目)
2、dependencies-----生产环境依赖包的名称和版本号,即这些 依赖包 都会打包进 生产环境的JS文件里面
3、devDependencies-----开发环境依赖包的名称和版本号,即这些 依赖包 只用于 代码开发 的时候,不会打包进 生产环境js文件 里面