使用vue构建组件化开发项目

参考链接：链接: link.
https://www.jianshu.com/p/3092b382ee80
一、搭建环境
1、首先安装node环境，这里就不详细讲了。
2、然后搭建vue 项目环境，全局安装vue.
3、安装完vue之后，进入你的项目目录，创建一个基于webpack模板的新项目：vue init webpack 项目名

4、进入项目：cd 项目名，安装依赖，安装成功之后会多出一个node_modules目录。

5、npm run dev,启动项目，启动成功

二、vue项目目录讲解
1、build.js:构建脚本目录
1）build.js ==> 生产环境构建脚本；
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置
1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3）prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

使用vue构建组件化开发项目相关推荐

Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
Vue/React组件化开发的一些思考
组件化开发的优势组件化开发利用了面向对象的威力,易于构建规模比较大的应用并且获得比较高的可维护性,可扩展性.Vue.React厂商及社区不但提供了组件化开发的框架,而且提供了易于起步并包含了从编码. ...
Vue.js 组件化开发
三.组件化开发 1.1 组件化的实现和使用步骤组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件语法糖 1.5 组件模板抽离的写法 1.6 组件数据存放 1.7 ...
Vue.js教程-组件化开发
Vue.js教程-组件化开发前言 Vue组件化什么是组件化 Vue单页面开发的解释组件化思想组件的使用原理实际开发中的使用-父子组件父子组件传递数据父传子-props用法子传父-th ...
【Vue.js 知识量化】组件化开发 + 前端模块化
Vue.js 组件化开发组件化认识组件化注册组件全局组件和局部组件父子组件组件数据父子组件的通信父->子:props 子->父:$emit() 父子组件的访问方式 $chi ...
Thymeleaf + Vue组件化开发
Thymeleaf 搭配 Vue 完成组件化开发前言一.vue2 1.引入静态文件 2.声明组件二.语法搭配使用vue方法调用th数据前言提示:thymeleaf 固然好,但是 vue 也 ...
微信小程序基础3【组件化开发、自定义组件、全栈开发、使用Express】
视频地址: https://www.bilibili.com/video/BV1cW411T7t6 [2018]学做小程序- 清华大学 https://www.bilibili.com/video/ ...
android 组件化_你曾遇到的某大厂奇葩问题：Android组件化开发，组件间的Activity页面跳转...
组件化开发有什么好处? 1.当项目越来越大时,app的业务越来越复杂,会出现业务功能复杂混乱,各功能块.页面相互依赖,相互调用太多导致耦合度高,而采用组件化开发,我们就可以将功能模块合理的划分,降低功 ...
vue组件化开发实践
前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

使用vue构建组件化开发项目

使用vue构建组件化开发项目相关推荐

最新文章

热门文章