2019-03-28(vue-cli项目)


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-------使用标签渲染整个工程的.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文件 里面

你可能感兴趣的:(2019-03-28(vue-cli项目))