VUE—简单认识


写在头头儿

    知道vue的存在是刚刚出来工作时候,第一眼看到“哇”好巧哦,跟在家用的angular一样,上来就用超级开心的!
公司为什么选vue呢?先做个简单的对比吧!
    angular比vue强大、也难。适合大项目多人员的开发。强大主要是引入组件和第三方库比较多,自然实现的功能比vue多了,就强大了哦。这样问题也有了,遇到问题就不好解决了,这就是说难的原因了。
    vue轻量级框架,简单易学,没有任何依赖。
各有个的优缺点,只是介绍我知道的这部分,公司是根据本公司的现状考虑使用了vue,原因。
    1、入门简单:公司的开发小组没有接触过前后端分离的框架,vue比angular好上手。
    2、中文文档多:开发时或后期维护的时候遇到问题能有解决方案并且不耽误项目能很多好的解决问题。


讲一讲vue的快速入门。


引入 iView
  在项目的入口页面 main.js 中配置:

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(iView);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});


按需引用
  借助插件 babel-plugin-import可以实现按需加载组件,减少文件体积。首先安装,并在文件 .babelrc 中配置:

npm install babel-plugin-import --save-dev
// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}


  然后这样按需引入组件,就可以减小体积了:

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);


特别提醒
  按需引用仍然需要导入样式,即在 main.js 或根组件执行

import 'iview/dist/styles/iview.css';


组件使用规范
  使用:prop传递数据格式为 数字、布尔值或函数时,必须带:(兼容String除外,具体看组件文档),比如:

Correct usage:
<Page :current="1" :total="100"></Page>

Incorrect usage:
<Page current="1" total="100"></Page>


  在非 template/render 模式下(例如使用 CDN 引用时),组件名要分隔,例如 DatePicker 必须要写成 date-picker。
以下组件,在非 template/render 模式下,需要加前缀 i-:

Button: i-button
Col: i-col
Table: i-table
Input: i-input
Form: i-form
Menu: i-menu
Select: i-select
Option: i-option
Progress: i-progress


  以下组件,在所有模式下,必须加前缀 i-,除非使用

iview-loader:
Switch: i-switch
Circle: i-circle
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
Vue脚手架,也称为Vue CLI(Command Line Interface),是Vue官方提供的命令行工具,用于快速搭建Vue项目的脚手架。 Vue脚手架提供了一系列的命令和插件,可以快速创建一个Vue项目,并且可以集成Vue相关的插件、工具和模板,使开发者可以更加高效地开发Vue应用程序。 下面是使用Vue脚手架搭建项目的步骤: 1. 安装Node.js和npm 在开始之前,需要先安装Node.js和npm,可以到官网上下载安装包进行安装。 2. 全局安装Vue脚手架 在命令行中输入以下命令,全局安装Vue脚手架: ``` npm install -g @vue/cli ``` 3. 创建Vue项目 使用Vue脚手架创建Vue项目非常简单,只需要在命令行中输入以下命令: ``` vue create my-project ``` 其中,my-project是项目名称,可以根据自己的需要进行设置。 在创建项目时,可以选择使用默认配置或者手动进行配置,配置完成后,Vue脚手架会自动下载所需的依赖包,并初始化项目。 4. 运行项目 在项目创建完成后,可以使用以下命令启动项目: ``` npm run serve ``` 这个命令会启动一个本地服务器,可以在浏览器中访问http://localhost:8080进行预览。 5. 打包项目 在开发完成后,可以使用以下命令将项目打包成静态文件: ``` npm run build ``` 这个命令会生成一个dist目录,里面包含了所有的静态文件,可以直接上传到服务器进行部署。 以上就是使用Vue脚手架创建项目的基本步骤,通过Vue脚手架,可以快速、高效地创建Vue项目,提高开发效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值