一.Vue-CLI基本使用
-
什么是Vue-CLI (Command Line Interface)?
Vue -CLI是vue官方提供的脚手架工具，默认已经帮我们搭建好了一套利用webpack管理vue的项目结构 -
如何安装Vue -cli和使用Vue -CLI?
安装脚手架工具:npm install -g @vue/cli
检查是否安装成功:vue --version
通过脚手架创建项目:vue create project-name -
通过Vue -CLI生成的项目结构
在Vue -CLI2.x中生成的项目结构中我们能够看到build文件夹和config文件夹这两个文件夹中存储了webpack相关的配置，我们可以针对项目需求修改webpack配置
在Vue -CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹
这么做的目的是为了化繁为简，让开发者不用关心webpack,只用关心如何使用Vue
node_ modules文件夹:存储了依赖的相关的包
public文件夹: 一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库。任何放置在public 文件夹的静态资源都会被简单的复制，而不经过webpack。 开发者需要通过绝对路径来引用它们。
src文件夹:代码文件夹
|---assets文件夹:存储项目中自己的一些静态文件(图片/字体等)
|---components文件夹:存储项目中的自定义组件(小组件，公共组件)
|---views文件夹:存储项目中的自定义组件(大组件，页面级组件，路由级别组件)
|---router文件夹:存储VueRouter相关文件 (配置路由)
|---store文件夹: 存储Vuex相关文件
|---App.vue文件:根组件
|---main.js文件:Vue的入口js文件 -
修改webpack的配置
Vue-CLI为了方便起见对webpack原有的属性进行了一 层封装， 如果我们需要修改webpack的配置，那么我们可以在项目中新建一个vue.config.js的文件，在此文件中使用Vue-CLI封装的configureWebpack属性来修改webpack的配置。
例如：想要修改输出目录名称
原来修改输出目录名称的方式：const path = require('path') module.exports = { output: { path: path.resolve(__dirname, 'bundle') } }利用Vue-CLI创建项目后，修改输出目录名称的方式：
const webpack = require('webpack') // vue.config.js module.exports = { /* 修改打包以后的目录名称 */ outputDir: 'bundle', /* 如果不可以满足我们的需求，那么我们可以通过configureWebpack的属性来编写原生的webpack配置 */ configureWebpack: { /* 就可以在这个对象中编写原生的webpack配置 */ /* 在webpack中添加插件需要写在plugins中 */ plugins: [ /* 之后每一个打包好的文件中都会有 ‘勿忘@注’的注释开头 */ new webpack.BannerPlugin({ banner: '勿忘@注' }) ] } }
二.elementUI
-
什么是elementUI?
ElementUI是饿了么前端团队推出的一款基于Vue.js 的桌面端UI框架
和Bootstrap一样对原生的HTML标签进行了封装, 让我们能够专注于业务逻辑而不是UI界面 -
如何安装elementUI？
npm安装：npm i element-ui -S - 完整引入ElementUI
在main.js文件中写入:
import Vue from 'vue'; import App from './App.vue'; // 1.导入elementUI和elementUI的css文件 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 2.告诉Vue，我们在项目中需要用的elementUI Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
- 按需引入ElementUI
1.借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component：
npm install babel-plugin-component -D2.修改 .babelrc的配置文件
module.exports = { "presets": [ ["@vue/cli-plugin-babel/preset", { "modules": false }] ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }3.在main.js文件中写入:
import Vue from 'vue'; import App from './App.vue'; //1.如果你只希望引入部分组件，比如 Button 和 Switch,就只需要导入这两个组件 import { Button, Switch } from 'element-ui' // 注意点：在elementUI中按需引入可以不用导入css文件 // import 'element-ui/lib/theme-chalk/index.css' // 2.告诉Vue，我们在项目中需要用的elementUI Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
三.MintUI
-
什么是mintUI?
mintUI是饿了么前端团队推出的一款基于Vue.js 的移动端UI框架 -
如何安装mintUI？
npm安装：npm install mint-ui -S - 完整引入mintUI
在main.js文件中写入:
import Vue from 'vue' import App from './App' // 1.导入mintUI和mintUI的css文件 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' // 2.告诉Vue，我们在项目中需要用的mintUI // component注册全局组件 Vue.component(Button.name, Button) Vue.component(Tabbar.name, Tabbar) Vue.component(TabItem.name, TabItem) /* eslint-disable no-new */ new Vue({ el: '#app', render: c => c(App) })
- 按需引入mintUI
1.借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component：
npm install babel-plugin-component -D2.修改 .babelrc 文件中的配置
module.exports = { presets: [ ['@vue/cli-plugin-babel/preset', { 'modules': false }] ], plugins: [['component', { 'libraryName': 'mint-ui', 'style': true } ]] }3.在main.js文件中写入:
import Vue from 'vue' import App from './App' // 1.如果你只希望引入部分组件，比如 Button, Tabbar和TabItem ,就只需要导入这三个组件 import { Button, Tabbar, TabItem } from 'mint-ui' // 注意点：在MintUI中哪怕是按需引入也必须导入css文件 import 'mint-ui/lib/style.css' // 2.告诉Vue，我们在项目中需要用的mintUI // component注册全局组件 Vue.component(Button.name, Button) Vue.component(Tabbar.name, Tabbar) Vue.component(TabItem.name, TabItem) /* eslint-disable no-new */ new Vue({ el: '#app', render: c => c(App) })
四.Vant
-
什么是Vant?
Vant是有赞前端团队推出的一款基于Vue.js 的移动端UI框架,适合做电商 -
如何安装Vant？
npm安装：npm install -g @vue/cli - 推荐按需引入
1.babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。首先，安装babel-plugin-import：
npm i babel-plugin-import -D2.在babel.config.js 文件中配置
module.exports = { presets: [ ['@vue/cli-plugin-babel/preset', { 'modules': false }] ], plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] }3.在main.js文件中写入
import Vue from 'vue' import App from './App' // 1.如果你只希望引入部分组件，比如NavBar, Card, GoodsAction, GoodsActionIcon, GoodsActionButton ,就只需要导入这些个组件 import { NavBar, Card, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant' //2.导入vant的css文件 import 'vant/lib/index.css' // 3.告诉Vue，我们在项目中需要用的Vant Vue.use(NavBar) Vue.use(Card) Vue.use(GoodsAction) Vue.use(GoodsActionIcon) Vue.use(GoodsActionButton) /* eslint-disable no-new */ new Vue({ el: '#app', render: c => c(App) })
五.Plugin
-
Vue.use()做了什么事情?
Vue.use的作用是注册一个Vue插件(注册组件)。
除了利用component/components注册组件以外，还可以通过vue.use(XXX)来注册组件，但前提是XXX必须是是一个封装好的插件并且Vue.use(XXX)必须在new Vue()之前使用。 -
什么时候需要定义插件?
当某一个组件或者功能经常需要被使用到时，我们就可以将这个组件或者功能定义成一个插件 -
如何封装一个插件？
1.在
main.js文件中通过use()来创建组件(前提是写在use()中的组件必须是以一个封装好的插件)import Vue from 'vue' import App from './App.vue' import store from './store' // 4.这里使用use来创建组件，只需要引入plugin目录下的index.js文件即可 import Loading from './plugin/loading/index.js' // 方式三：通过use来创建组件，前提是写在use中的组件必须是以一个封装好的插件 Vue.use(Loading) Vue.config.productionTip = false new Vue({ store, render: h => h(App) }).$mount('#app')2.在
src目录下创建plugin目录，并且在plugin目录创建新的目录,命名为loading(因为我这里创建的组件是网络加载指示器，所以组件名称是Loading，组件所在文件就命名为Loading.vue),在Loading目录下粘贴components目录下的Loading.vue文件，在创建一个新的index.js文件(这里的一个文件就代表了一个组件)
3.在
plugin目录下的index.js文中编写一下代码，就完成了把组件包装成插件的工作import Vue from 'vue' // 导入封装好的组件 import Loading from './Loading' export default { // 注意点：如果要将一个组件封装成一个插件，就必须用到install方法，并且在install方法中注册当前的组件 // 原理：只要调用use方法，use方法就会去调用插件的install方法，在install方法中册当前的组件，也就完成了把组件包装成插件的工作 install: function () { // 注册全局组件 Vue.component(Loading.name, Loading) }4.附加：在
plugin目录下Loading.vue文件中的网络加载指示器 代码<template> <div class="container"> <div class="loading"></div> <p class="title">正在加载...</p> </div> </template> <script> export default { name: 'Loading' } } </script> <style scoped lang="scss"> .container{ width: 200px; height: 200px; border-radius: 20px; background: rgba(0,0,0,0.5); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); .loading{ width: 100px; height: 100px; border-radius: 50%; border: 5px solid #FFFFFF; margin: 20px auto; border-right-color: #3a8ee6; animation: loading 2s linear infinite; } .title{ text-align: center; font-size: 16px; color: #fff; } } @keyframes loading { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } </style>
- 为何要将组件封装成插件？将组件封装成插件的好处？
-
为组件扩展全局方法或者 property。如：vue-custom-element
-
为组件扩展全局资源：指令/过滤器/过渡等。如 vue-touch
-
为组件通过全局混入来添加一些组件选项。如 vue-router
-
为组件扩展 Vue 实例方法，通过把它们添加到
Vue.prototype上实现。 -
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
网友评论