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-------使用标签<route-view></router-view>渲染整个工程的.vue组件
12、src下main.js------vue-cli工程的入口文件
13、index.html-----设置项目的一些meta头信息和提供<div id="app"></div>用于挂载 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文件 里面
网友评论