【尚硅谷】Vue2.x组件化编码学习笔记--渐进式的JS框架

Vue组件化编码

• ​​一、使用Vue-cli创建项目​​

• ​​1.1 说明​​
• ​​1.2 创建Vue项目​​

• ​​1.2.1 如何修改端口以及自动运行​​

• ​​1.3 Vue-cli创建的项目的目录结构​​
• ​​1.4 组件如何定义和使用​​

• ​​1.4.1 组件定义​​
• ​​1.4.2 使用组件​​

• ​​1.5 入口函数main.js​​

• ​​二、项目打包与发布​​

• ​​2.1 打包​​
• ​​2.2 发布1：使用静态服务器工具包​​
• ​​2.3 发布2：使用动态的web服务器tomcat​​

• ​​三、Vue案例-评论室​​

• ​​3.1 初始化显示​​

• ​​3.1.1 Add_Comments.vue​​
• ​​3.1.2 Comments_List.vue​​
• ​​3.1.3 List_Item.vue​​
• ​​3.1.4 App.vue​​
• ​​3.1.5 main.js​​
• ​​3.1.6 小结​​

• ​​3.2 动态的加载数据​​

• ​​3.2.1 组件间如何通信​​

• ​​3.2 交互添加​​
• ​​3.3 交互删除​​

• ​​四、Vue案例-任务列表​​

• ​​4.1 数据动态显示​​
• ​​4.2 滑动显示效果​​
• ​​4.3 如何缓存数据​​
• ​​4.4 如何实现​​

• ​​五、消息订阅发布​​

• ​​5.1 订阅消息​​
• ​​5.2 发布消息​​
• ​​5.3 使用​​
• ​​5.3 注意事项​​

一、使用Vue-cli创建项目

1.1 说明

1. vue-cli是vue官方提供的

1.2 创建Vue项目

1. npm install -g vue-cli
2. vue init webpack vue_demo：
3. cd vue_demo
4. npm install
5. npm run dev
6. 访问：http://localhost:8080/

如果出现安装慢，可以去看我的另一篇文章。
​​​npm install 安装满，怎么解决​​

1.2.1 如何修改端口以及自动运行

在config目录下，找到index.js文件，如下图，重启项目。

1.3 Vue-cli创建的项目的目录结构

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .eslintignore          // eslint语法忽略的配置
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                      // postcss配置文件
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,包依赖信息等

❓什么是组件

标签：vue,name,--,List,JS,Vue,Vue2,组件
From： https://blog.51cto.com/u_14957231/5725621